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

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

java - No use of nillable="0" in SOAP Webservice -

ubuntu - Laravel 5.2 quickstart guide gives Not Found Error -