This discussion is archived
6 Replies Latest reply: Oct 19, 2012 12:33 AM by scott.wesley RSS

Show autocomplete on focus or keydown

scott.wesley Guru
Currently Being Moderated
Hi all,

Using Apex 4.1, I'm trying to adjust any "Text field with autocomplete" item on my page so that it will automatically display the options onfocus or when key-down.

I've tried to adapt this to APEX
http://forum.jquery.com/topic/autocomplete-on-focus-show-default-drop-down
based on ideas I saw here
Text item with autocomplete and empty return values in js
but my jquery kungfu is still growing...

For instance, I tried this for a specific field - it's syntactically ok & no errors reported in the console, but nothing happens on focus
(Footer text on page)
<script type="text/javascript">   
$("#P1_ITEM").bind('focus',(function(){
     if (this.value == "")
          $(this).trigger('keydown.autocomplete');
}));
</script>
Thanks!
  • 1. Re: Show autocomplete on focus or keydown
    Tom Petrus Expert
    Currently Being Moderated
    What is probably most important is the minLength parameter. If you did not specify it, then the default is 1.
    That means that when you focus and trigger a search, nothing will happen because the minimum required length has not been met. (http://api.jqueryui.com/autocomplete/)
    minLength
    Type: Integer
    Default: 1
    The minimum number of characters a user must type before a search is performed. Zero is useful for local data with just a few items, but a higher value should be used when >a single character search could match a few thousand items.
    search( [value ] )
    Triggers a search event and invokes the data source if the event is not canceled. Can be used by a selectbox-like button to open the suggestions when clicked. When invoked with no parameters, the current input's value is used. Can be called with an empty string and minLength: 0 to display all items.
    Having that said, you can try this:
    $("#P1_ITEM").focus(function(){
       if ($(this).val() == ""){
          //preserve the minLength option
          var lMinLength = $(this).autocomplete("option","minLength");
          //set minLength to 0 so a search can trigger
          $(this).autocomplete("option","minLength", 0);      
          $(this).autocomplete("search",'');
          //reset the minlength option
          $(this).autocomplete("option","minLength", lMinLength);          
       };
    });
    This triggers the search directly, instead of indirectly by emulating the keystroke.

    Btw, you don't need to bind to the focus event with a bind, you can shorthand it with .focus. The meaning is the same though, and using bind to the focus event is just as correct. Just sayin' ;-)
    This method is a shortcut for .bind('focus', handler) in the first and second variations, and .trigger('focus') in the third.
  • 2. Re: Show autocomplete on focus or keydown
    scott.wesley Guru
    Currently Being Moderated
    Thanks Tom - I did try other variations with the .focus shorthand, but with no active feedback I wasn't sure if I had the syntax right. I also saw the documentation regarding minLength, but again wasn't sure since nothing was happening.

    I tried this syntax - and the code makes sense based on what I've read, and I know it is being called because I added some debugging - but the autocomplete options aren't showing.

    It also breaks the normal behaviour when I start typing letters
    GET http://myhost:7778/pls/apex/search 404 (Not Found) jquery-1.6.2.js:7869
    GET http://myhost:7778/pls/apex/option 404 (Not Found)>
    Scott
  • 3. Re: Show autocomplete on focus or keydown
    Tom Petrus Expert
    Currently Being Moderated
    huh, weird. Is this a jquery autocomplete or an apex autocomplete? If it is your own definition, could you share your initialisation code?
    GET http://myhost:7778/pls/apex/search 404 (Not Found) jquery-1.6.2.js:7869
    GET http://myhost:7778/pls/apex/option 404 (Not Found)
    I don't understand these: why would it form these urls? I have code with this minlength juggle and search triggering, and don't get such gets. My source is ajax and i post to wwv_flow.show to get data from an ajax callback process, and it works fine.
  • 4. Re: Show autocomplete on focus or keydown
    scott.wesley Guru
    Currently Being Moderated
    I thought it was weird, too!

    I'm using the apex autocomplete item widget out of the shiny 4.1 box.
  • 5. Re: Show autocomplete on focus or keydown
    Tom Petrus Expert
    Currently Being Moderated
    the shiny widget however does not expose a lot. While it internally uses the jquery autocomplete widget, not a lot else happens. None of the widget events or options are exposed, and you can't access them or bind to them. A quick demonstration is to bind to several of the autocomplete events
    $("#P22_EMP").bind('close', function(){console.log('close');});
    $("#P22_EMP").bind('search', function(){console.log(search);});
    Those never fire. Same for options: they aren't there.

    What i weird is that i can't seem to programmatically focus on the autocomplete item at all.
    $("#P22_EMP").focus()
    doesn't work. Calling it in a timeout: doesn't work. That is annoying, because when you do
    $("#P22_EMP").trigger("keydown");
    and then focus the field manually, the option list will popup! If you don't fire the keydown event, no list will popup.
    However: focus() will work when the page has loaded and you have not interacted with the item yet. keydown will not work.
    Once you have interacted with the item (type a letter in), focus will stop working, but keydown will react in the above way.
    If you can find a way to actually set focus to the field, then you may just be lucky, but only after a first interaction... I'm trying to wrap my head around it.
    Edit:
    okay okay. Since the widget is based off the autocomplete, this behaviour does make sense. It uses the jquery autocomplete defaults of course, which means that minLength is set to 0. So trying to do a keydown on this item when no value is present, and not getting the list would be quite evident.
    Once at least 1 character is present, triggering keydown and putting manual focus to the field pops up the list. Still though, no damn way to focus the field through code for some reason.

    I'd say that the apex autocomplete widget does not have a lot of possible interaction. I don't think that you can change (or retrieve) anything after it has been initialised due to how it is created. (see apex_widget_4_1.js if you want to take a look at it).
    I'm personally more fond of setting up a jquery autocomplete too, which gives me a lot more control. In this case, you can even disregard my previous post: it works great for jquery autocomplete, just not for the apex widget.

    Edited by: Tom on Oct 9, 2012 11:27 AM
  • 6. Re: Show autocomplete on focus or keydown
    scott.wesley Guru
    Currently Being Moderated
    Interesting.

    The business has accepted a solution where we concatenate a space to the end of all options in the LOV, so when the user hits "space", all options are shown. We then trim the selection on the way to the DB.

    I look forward to a more configurable Autocomplete widget in 4.2+

    Scott

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points