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:
foreach ($terms as $key=>$term) {
echo
"
<script>
$(function() {
var availableTags = [" . $term . '];
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#' . $key . '-input" )
// do not navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.bind( "click", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
});
</script>
';
}
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.
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:
foreach ($terms as $key=>$term) {
echo
"
<script>
$(function() {
var availableTags = [" . $term . '];
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#' . $key . '-input" )
// do not navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.bind( "click", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
});
</script>
';
}
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.