Jquery UI Autocomplete Enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.
But sometimes it does not work perfectly because it return results not in the Desire location as you expect. here you will find how to make Jquery UI Autocomplete which return result into the separate div.
<div class="ui-widget">
<input id="birds" type="text" />
<label for="birds">Birds: </label>
<div id="results"></div>
</div>
<script>
jQuery(function() {
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
jQuery( "#birds" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === jQuery.ui.keyCode.TAB &&
jQuery( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
source: function( request, response ) {
jQuery.getJSON( "search.php", {
term: extractLast( request.term )
}, response );
},
open: function() {
jQuery(this).autocomplete("widget")
.appendTo("#results")
.css("position", "static");
},
search: function() {
// custom minLength
var term = extractLast( this.value );
if ( term.length < 2 ) {
return false;
}
},
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>
0 Comments