jQuery Forum

Hello everyone,

loving jQuery, loving jQuery UI, loving the community around it all. :)
Just wanted to state that for the record first.

I have a rather simple question, unfortunately I seem to be unable to find the solution to my specific problem.
Currently I am using the awesome Autocomplete Widget in the "multiple values"-variation (link).
My code generating the appropriate script looks something like this:

1. foreach ($terms as $key=>$term) {
2.   echo
3.   "
4.   <script>
5.  
6.       $(function() {
7.           var availableTags = [" . $term . '];       
8.           function split( val ) {
9.               return val.split( /,\s*/ );
10.           }
11.           function extractLast( term ) {
12.               return split( term ).pop();
13.           }
14.           $( "#' . $key . '-input" )
15.               // do not navigate away from the field on tab when selecting an item
16.               .bind( "keydown", function( event ) {
17.                   if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "autocomplete" ).menu.active ) {
18.                       event.preventDefault();
19.                   }
20.               })
21.             .bind( "click", function( event ) {
22.                   if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "autocomplete" ).menu.active ) {
23.                       event.preventDefault();
24.                   }
25.               })
26.               .autocomplete({
27.                   minLength: 0,
28.                   source: function( request, response ) {
29.                       // delegate back to autocomplete, but extract the last term
30.                       response( $.ui.autocomplete.filter(
31.                           availableTags, extractLast( request.term ) ) );
32.                   },
33.                   focus: function() {
34.                       // prevent value inserted on focus
35.                       return false;
36.                   },
37.                   select: function( event, ui ) {
38.                       var terms = split( this.value );
39.                       // remove the current input
40.                       terms.pop();
41.                       // add the selected item
42.                       terms.push( ui.item.value );
43.                       // add placeholder to get the comma-and-space at the end
44.                       terms.push( "" );
45.                       this.value = terms.join( ", " );
46.                       return false;
47.                   }
48.               });
49.       });
50.  
51.   </script>
52.   ';
53. }

So far, everything works brilliantly. The autocomplete box appears as soon as any key is pressed while the focus is on one of the input fields.

Now, I would like to change it a little so as to make the autocomplete box appear onfocus (as soon as someone clicks into the input field).
I already have minLength set to zero, but that only gets me so far as to open the suggestions on any keydown.

How can I make it trigger on focus?

Regards,
ForceWare

Hello everyone,

loving jQuery, loving jQuery UI, loving the community around it all. :)
Just wanted to state that for the record first.

I have a rather simple question, unfortunately I seem to be unable to find the solution to my specific problem.
Currently I am using the awesome Autocomplete Widget in the "multiple values"-variation (link).
My code generating the appropriate script looks something like this:

1. foreach ($terms as $key=>$term) {
2.   echo
3.   "
4.   <script>
5.  
6.       $(function() {
7.           var availableTags = [" . $term . '];       
8.           function split( val ) {
9.               return val.split( /,\s*/ );
10.           }
11.           function extractLast( term ) {
12.               return split( term ).pop();
13.           }
14.           $( "#' . $key . '-input" )
15.               // do not navigate away from the field on tab when selecting an item
16.               .bind( "keydown", function( event ) {
17.                   if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "autocomplete" ).menu.active ) {
18.                       event.preventDefault();
19.                   }
20.               })
21.             .bind( "click", function( event ) {
22.                   if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "autocomplete" ).menu.active ) {
23.                       event.preventDefault();
24.                   }
25.               })
26.               .autocomplete({
27.                   minLength: 0,
28.                   source: function( request, response ) {
29.                       // delegate back to autocomplete, but extract the last term
30.                       response( $.ui.autocomplete.filter(
31.                           availableTags, extractLast( request.term ) ) );
32.                   },
33.                   focus: function() {
34.                       // prevent value inserted on focus
35.                       return false;
36.                   },
37.                   select: function( event, ui ) {
38.                       var terms = split( this.value );
39.                       // remove the current input
40.                       terms.pop();
41.                       // add the selected item
42.                       terms.push( ui.item.value );
43.                       // add placeholder to get the comma-and-space at the end
44.                       terms.push( "" );
45.                       this.value = terms.join( ", " );
46.                       return false;
47.                   }
48.               });
49.       });
50.  
51.   </script>
52.   ';
53. }

So far, everything works brilliantly. The autocomplete box appears as soon as any key is pressed while the focus is on one of the input fields.

Now, I would like to change it a little so as to make the autocomplete box appear onfocus (as soon as someone clicks into the input field).
I already have minLength set to zero, but that only gets me so far as to open the suggestions on any keydown.

How can I make it trigger on focus?

Regards,
ForceWare