javascript - JQuery Autocomplete with countries -
i'm trying make autocomplete country codes in jquery. i'm using code example. in site, works well, values, appear list in front of input, , not example in site. couldn't run on jsfiddle, here my code. you!
var countries = { "argentina (ar)":"ar", "united states (us)":"us", "comoros": "km", "congo (brazzaville)": "cg", "congo, democratic republic of the": "cd", "cook islands": "ck", "costa rica": "cr", "côte d'ivoire": "ci", "croatia": "hr", "cuba": "cu", "cyprus": "cy", "czech republic": "cz", "denmark": "dk", "djibouti": "dj", "dominica": "dm", "dominican republic": "do", }; $( "#countrycodes" ) // don't navigate away field on tab when selecting item .bind( "keydown", function( event ) { if ( event.keycode === $.ui.keycode.tab && $( ).autocomplete( "instance" ).menu.active ) { event.preventdefault(); } }) .autocomplete({ minlength: 0, source: function( request, response ) { // delegate autocomplete, extract last term response( $.ui.autocomplete.filter( object.keys(countries), extractlast( request.term ) ) ); }, focus: function() { // prevent value inserted on focus return false; }, select: function( event, ui ) { var terms = split( this.value ); // remove current input terms.pop(); // add selected item terms.push( countries[ui.item.value] ); // add placeholder comma-and-space @ end terms.push( "" ); this.value = terms.join( "," ); return false; } });
one solution provide autocomplete source array. jquery's autocomplete expects source array contain objects properties label
, value
. build array after defining countries
object, e.g.:
var mysource = object.keys(countries).map(function(country) { return { label: country, value: countries[country] }; });
...and provide autocomplete:
$('#countrycodes').autocomplete({ source: mysource });
to fiddle running had comment out rest of passing autocomplete widget because had undefined functions.
Comments
Post a Comment