只是想在我的搜索框中創建一個動態下拉列表作爲谷歌搜索

Question

我只是想要一個動態的下拉列表，就好像用戶輸入國名的第一個字母，然後顯示下拉列表相關的單詞，因爲你可以看到谷歌搜索欄。我將從這個鏈接檢索國家名稱http://ws.postcoder.com/pcw/PCW45-12345-12345-1234X/country?format=json 其jason文件。我怎樣才能讓ajax調用一個動態的下拉列表。

Answer 1

您可以使用Jquery Autocomplete。你可以檢查它here

Answer 2

你可以使用jQuery自動完成，但你應該編輯你的json。

的Javascript

items = [{"countryname":"Afghanistan","iso2":"AF","iso3":"AFG","iso3number":"4"},{"countryname":"Aland Islands","iso2":"AX","iso3":"ALA","iso3number":"248"},{"countryname":"Albania","iso2":"AL","iso3":"ALB","iso3number":"8"},{"countryname":"Algeria","iso2":"DZ","iso3":"DZA","iso3number":"12"},{"countryname":"American Samoa","iso2":"AS","iso3":"ASM","iso3number":"16"},{"countryname":"Andorra","iso2":"AD","iso3":"AND","iso3number":"20"},{"countryname":"Angola","iso2":"AO","iso3":"AGO","iso3number":"24"},{"countryname":"Anguilla","iso2":"AI","iso3":"AIA","iso3number":"660"},{"countryname":"Antarctica","iso2":"AQ","iso3":"ATA","iso3number":"10"},{"countryname":"Antigua and Barbuda","iso2":"AG","iso3":"ATG","iso3number":"28"},{"countryname":"Argentina","iso2":"AR","iso3":"ARG","iso3number":"32"},{"countryname":"Armenia","iso2":"AM","iso3":"ARM","iso3number":"51"},{"countryname":"Aruba","iso2":"AW","iso3":"ABW","iso3number":"533"},{"countryname":"Australia","iso2":"AU","iso3":"AUS","iso3number":"36"},{"countryname":"Austria","iso2":"AT","iso3":"AUT","iso3number":"40"},{"countryname":"Azerbaijan","iso2":"AZ","iso3":"AZE","iso3number":"31"},{"countryname":"Bahamas","iso2":"BS","iso3":"BHS","iso3number":"44"},{"countryname":"Bahrain","iso2":"BH","iso3":"BHR","iso3number":"48"},{"countryname":"Bangladesh","iso2":"BD","iso3":"BGD","iso3number":"50"},{"countryname":"Barbados","iso2":"BB","iso3":"BRB","iso3number":"52"},{"countryname":"Belarus","iso2":"BY","iso3":"BLR","iso3number":"112"},{"countryname":"Belgium","iso2":"BE","iso3":"BEL","iso3number":"56"},{"countryname":"Belize","iso2":"BZ","iso3":"BLZ","iso3number":"84"},{"countryname":"Benin","iso2":"BJ","iso3":"BEN","iso3number":"204"},{"countryname":"Bermuda","iso2":"BM","iso3":"BMU","iso3number":"60"},{"countryname":"Bhutan","iso2":"BT","iso3":"BTN","iso3number":"64"},{"countryname":"Bolivia","iso2":"BO","iso3":"BOL","iso3number":"68"},{"countryname":"Bonaire, Sint Eustatius And Saba","iso2":"BQ","iso3":"BES","iso3number":"535"},{"countryname":"Bosnia and Herzegovina","iso2":"BA","iso3":"BIH","iso3number":"70"},{"countryname":"Botswana","iso2":"BW","iso3":"BWA","iso3number":"72"},{"countryname":"Br. Indian Ocean Ter.","iso2":"IO","iso3":"IOT","iso3number":"86"},{"countryname":"Brazil","iso2":"BR","iso3":"BRA","iso3number":"76"},{"countryname":"Brunei Darussalam","iso2":"BN","iso3":"BRN","iso3number":"96"},{"countryname":"Bulgaria","iso2":"BG","iso3":"BGR","iso3number":"100"},{"countryname":"Burkina Faso","iso2":"BF","iso3":"BFA","iso3number":"854"},{"countryname":"Burundi","iso2":"BI","iso3":"BDI","iso3number":"108"},{"countryname":"Cambodia","iso2":"KH","iso3":"KHM","iso3number":"116"},{"countryname":"Cameroon","iso2":"CM","iso3":"CMR","iso3number":"120"},{"countryname":"Canada","iso2":"CA","iso3":"CAN","iso3number":"124"},{"countryname":"Cape Verde","iso2":"CV","iso3":"CPV","iso3number":"132"},{"countryname":"Cayman Islands","iso2":"KY","iso3":"CYM","iso3number":"136"},{"countryname":"Central African Rep.","iso2":"CF","iso3":"CAF","iso3number":"140"},{"countryname":"Chad","iso2":"TD","iso3":"TCD","iso3number":"148"},{"countryname":"Chile","iso2":"CL","iso3":"CHL","iso3number":"152"},{"countryname":"China","iso2":"CN","iso3":"CHN","iso3number":"156"},{"countryname":"Christmas Island","iso2":"CX","iso3":"CXR","iso3number":"162"},{"countryname":"Cocos (Keeling) Islands","iso2":"CC","iso3":"CCK","iso3number":"166"},{"countryname":"Colombia","iso2":"CO","iso3":"COL","iso3number":"170"},{"countryname":"Comoros","iso2":"KM","iso3":"COM","iso3number":"174"},{"countryname":"Congo (Dem. Rep.)","iso2":"CD","iso3":"COD","iso3number":"180"},{"countryname":"Congo (Rep.)","iso2":"CG","iso3":"COG","iso3number":"178"},{"countryname":"Cook Islands","iso2":"CK","iso3":"COK","iso3number":"184"},{"countryname":"Costa Rica","iso2":"CR","iso3":"CRI","iso3number":"188"},{"countryname":"Côte d'Ivoire","iso2":"CI","iso3":"CIV","iso3number":"384"},{"countryname":"Croatia","iso2":"HR","iso3":"HRV","iso3number":"191"},{"countryname":"Cuba","iso2":"CU","iso3":"CUB","iso3number":"192"},{"countryname":"Curacao","iso2":"CW","iso3":"CUW","iso3number":"531"},{"countryname":"Cyprus","iso2":"CY","iso3":"CYP","iso3number":"196"},{"countryname":"Czech Republic","iso2":"CZ","iso3":"CZE","iso3number":"203"},{"countryname":"Denmark","iso2":"DK","iso3":"DNK","iso3number":"208"},{"countryname":"Djibouti","iso2":"DJ","iso3":"DJI","iso3number":"262"},{"countryname":"Dominica","iso2":"DM","iso3":"DMA","iso3number":"212"},{"countryname":"Dominican Republic","iso2":"DO","iso3":"DOM","iso3number":"214"},{"countryname":"Ecuador","iso2":"EC","iso3":"ECU","iso3number":"218"},{"countryname":"Egypt","iso2":"EG","iso3":"EGY","iso3number":"818"},{"countryname":"El Salvador","iso2":"SV","iso3":"SLV","iso3number":"222"},{"countryname":"Equatorial Guinea","iso2":"GQ","iso3":"GNQ","iso3number":"226"},{"countryname":"Eritrea","iso2":"ER","iso3":"ERI","iso3number":"232"},{"countryname":"Estonia","iso2":"EE","iso3":"EST","iso3number":"233"},{"countryname":"Ethiopia","iso2":"ET","iso3":"ETH","iso3number":"231"},{"countryname":"Falkland Is. (Malvinas)","iso2":"FK","iso3":"FLK","iso3number":"238"},{"countryname":"Faröe Islands","iso2":"FO","iso3":"FRO","iso3number":"234"},{"countryname":"Fiji","iso2":"FJ","iso3":"FJI","iso3number":"242"},{"countryname":"Finland","iso2":"FI","iso3":"FIN","iso3number":"246"},{"countryname":"France","iso2":"FR","iso3":"FRA","iso3number":"250"},{"countryname":"French Guiana","iso2":"GF","iso3":"GUF","iso3number":"254"},{"countryname":"French Polynesia","iso2":"PF","iso3":"PYF","iso3number":"258"},{"countryname":"French Southern Territories","iso2":"TF","iso3":"ATF","iso3number":"260"},{"countryname":"Gabon","iso2":"GA","iso3":"GAB","iso3number":"266"},{"countryname":"Gambia","iso2":"GM","iso3":"GMB","iso3number":"270"},{"countryname":"Georgia","iso2":"GE","iso3":"GEO","iso3number":"268"},{"countryname":"Germany","iso2":"DE","iso3":"DEU","iso3number":"276"},{"countryname":"Ghana","iso2":"GH","iso3":"GHA","iso3number":"288"},{"countryname":"Gibraltar","iso2":"GI","iso3":"GIB","iso3number":"292"},{"countryname":"Greece","iso2":"GR","iso3":"GRC","iso3number":"300"},{"countryname":"Greenland","iso2":"GL","iso3":"GRL","iso3number":"304"},{"countryname":"Grenada","iso2":"GD","iso3":"GRD","iso3number":"308"},{"countryname":"Guadeloupe","iso2":"GP","iso3":"GLP","iso3number":"312"},{"countryname":"Guam","iso2":"GU","iso3":"GUM","iso3number":"316"},{"countryname":"Guatemala","iso2":"GT","iso3":"GTM","iso3number":"320"},{"countryname":"Guernsey","iso2":"GG","iso3":"GGY","iso3number":"831"},{"countryname":"Guinea","iso2":"GN","iso3":"GIN","iso3number":"324"},{"countryname":"Guinea-Bissau","iso2":"GW","iso3":"GNB","iso3number":"624"},{"countryname":"Guyana","iso2":"GY","iso3":"GUY","iso3number":"328"},{"countryname":"Haiti","iso2":"HT","iso3":"HTI","iso3number":"332"},{"countryname":"Honduras","iso2":"HN","iso3":"HND","iso3number":"340"},{"countryname":"Hong Kong","iso2":"HK","iso3":"HKG","iso3number":"344"},{"countryname":"Hungary","iso2":"HU","iso3":"HUN","iso3number":"348"},{"countryname":"Iceland","iso2":"IS","iso3":"ISL","iso3number":"352"},{"countryname":"India","iso2":"IN","iso3":"IND","iso3number":"356"},{"countryname":"Indonesia","iso2":"ID","iso3":"IDN","iso3number":"360"},{"countryname":"Iran","iso2":"IR","iso3":"IRN","iso3number":"364"},{"countryname":"Iraq","iso2":"IQ","iso3":"IRQ","iso3number":"368"},{"countryname":"Ireland","iso2":"IE","iso3":"IRL","iso3number":"372"},{"countryname":"Isle of Man","iso2":"IM","iso3":"IMN","iso3number":"833"},{"countryname":"Israel","iso2":"IL","iso3":"ISR","iso3number":"376"},{"countryname":"Italy","iso2":"IT","iso3":"ITA","iso3number":"380"},{"countryname":"Jamaica","iso2":"JM","iso3":"JAM","iso3number":"388"},{"countryname":"Japan","iso2":"JP","iso3":"JPN","iso3number":"392"},{"countryname":"Jersey","iso2":"JE","iso3":"JEY","iso3number":"832"},{"countryname":"Jordan","iso2":"JO","iso3":"JOR","iso3number":"400"},{"countryname":"Kazakhstan","iso2":"KZ","iso3":"KAZ","iso3number":"398"},{"countryname":"Kenya","iso2":"KE","iso3":"KEN","iso3number":"404"},{"countryname":"Kiribati","iso2":"KI","iso3":"KIR","iso3number":"296"},{"countryname":"Korea (Dem. Rep.)","iso2":"KP","iso3":"PRK","iso3number":"408"},{"countryname":"Korea (Rep.)","iso2":"KR","iso3":"KOR","iso3number":"410"},{"countryname":"Kuwait","iso2":"KW","iso3":"KWT","iso3number":"414"},{"countryname":"Kyrgyzstan","iso2":"KG","iso3":"KGZ","iso3number":"417"},{"countryname":"Laos","iso2":"LA","iso3":"LAO","iso3number":"418"},{"countryname":"Latvia","iso2":"LV","iso3":"LVA","iso3number":"428"},{"countryname":"Lebanon","iso2":"LB","iso3":"LBN","iso3number":"422"},{"countryname":"Lesotho","iso2":"LS","iso3":"LSO","iso3number":"426"},{"countryname":"Liberia","iso2":"LR","iso3":"LBR","iso3number":"430"},{"countryname":"Libya","iso2":"LY","iso3":"LBY","iso3number":"434"},{"countryname":"Liechtenstein","iso2":"LI","iso3":"LIE","iso3number":"438"},{"countryname":"Lithuania","iso2":"LT","iso3":"LTU","iso3number":"440"},{"countryname":"Luxembourg","iso2":"LU","iso3":"LUX","iso3number":"442"},{"countryname":"Macao","iso2":"MO","iso3":"MAC","iso3number":"446"},{"countryname":"Macedonia, TFYR","iso2":"MK","iso3":"MKD","iso3number":"807"},{"countryname":"Madagascar","iso2":"MG","iso3":"MDG","iso3number":"450"},{"countryname":"Malawi","iso2":"MW","iso3":"MWI","iso3number":"454"},{"countryname":"Malaysia","iso2":"MY","iso3":"MYS","iso3number":"458"},{"countryname":"Maldives","iso2":"MV","iso3":"MDV","iso3number":"462"},{"countryname":"Mali","iso2":"ML","iso3":"MLI","iso3number":"466"},{"countryname":"Malta","iso2":"MT","iso3":"MLT","iso3number":"470"},{"countryname":"Marshall Islands","iso2":"MH","iso3":"MHL","iso3number":"584"},{"countryname":"Martinique","iso2":"MQ","iso3":"MTQ","iso3number":"474"},{"countryname":"Mauritania","iso2":"MR","iso3":"MRT","iso3number":"478"},{"countryname":"Mauritius","iso2":"MU","iso3":"MUS","iso3number":"480"},{"countryname":"Mayotte","iso2":"YT","iso3":"MYT","iso3number":"175"},{"countryname":"Mexico","iso2":"MX","iso3":"MEX","iso3number":"484"},{"countryname":"Micronesia","iso2":"FM","iso3":"FSM","iso3number":"583"},{"countryname":"Moldova","iso2":"MD","iso3":"MDA","iso3number":"498"},{"countryname":"Monaco","iso2":"MC","iso3":"MCO","iso3number":"492"},{"countryname":"Mongolia","iso2":"MN","iso3":"MNG","iso3number":"496"},{"countryname":"Montenegro","iso2":"ME","iso3":"MNE","iso3number":"499"},{"countryname":"Montserrat","iso2":"MS","iso3":"MSR","iso3number":"500"},{"countryname":"Morocco","iso2":"MA","iso3":"MAR","iso3number":"504"},{"countryname":"Mozambique","iso2":"MZ","iso3":"MOZ","iso3number":"508"},{"countryname":"Myanmar","iso2":"MM","iso3":"MMR","iso3number":"104"},{"countryname":"Namibia","iso2":"NA","iso3":"NAM","iso3number":"516"},{"countryname":"Nauru","iso2":"NR","iso3":"NRU","iso3number":"520"},{"countryname":"Nepal","iso2":"NP","iso3":"NPL","iso3number":"524"},{"countryname":"Netherlands","iso2":"NL","iso3":"NLD","iso3number":"528"},{"countryname":"New Caledonia","iso2":"NC","iso3":"NCL","iso3number":"540"},{"countryname":"New Zealand","iso2":"NZ","iso3":"NZL","iso3number":"554"},{"countryname":"Nicaragua","iso2":"NI","iso3":"NIC","iso3number":"558"},{"countryname":"Niger","iso2":"NE","iso3":"NER","iso3number":"562"},{"countryname":"Nigeria","iso2":"NG","iso3":"NGA","iso3number":"566"},{"countryname":"Niue","iso2":"NU","iso3":"NIU","iso3number":"570"},{"countryname":"Norfolk Island","iso2":"NF","iso3":"NFK","iso3number":"574"},{"countryname":"Northern Mariana Islands","iso2":"MP","iso3":"MNP","iso3number":"580"},{"countryname":"Norway","iso2":"NO","iso3":"NOR","iso3number":"578"},{"countryname":"Oman","iso2":"OM","iso3":"OMN","iso3number":"512"},{"countryname":"Pakistan","iso2":"PK","iso3":"PAK","iso3number":"586"},{"countryname":"Palau","iso2":"PW","iso3":"PLW","iso3number":"585"},{"countryname":"Palestinian Territory","iso2":"PS","iso3":"PSE","iso3number":"275"},{"countryname":"Panama","iso2":"PA","iso3":"PAN","iso3number":"591"},{"countryname":"Papua New Guinea","iso2":"PG","iso3":"PNG","iso3number":"598"},{"countryname":"Paraguay","iso2":"PY","iso3":"PRY","iso3number":"600"},{"countryname":"Peru","iso2":"PE","iso3":"PER","iso3number":"604"},{"countryname":"Philippines","iso2":"PH","iso3":"PHL","iso3number":"608"},{"countryname":"Pitcairn","iso2":"PN","iso3":"PCN","iso3number":"612"},{"countryname":"Poland","iso2":"PL","iso3":"POL","iso3number":"616"},{"countryname":"Portugal","iso2":"PT","iso3":"PRT","iso3number":"620"},{"countryname":"Puerto Rico","iso2":"PR","iso3":"PRI","iso3number":"630"},{"countryname":"Qatar","iso2":"QA","iso3":"QAT","iso3number":"634"},{"countryname":"Réunion","iso2":"RE","iso3":"REU","iso3number":"638"},{"countryname":"Romania","iso2":"RO","iso3":"ROU","iso3number":"642"},{"countryname":"Russia","iso2":"RU","iso3":"RUS","iso3number":"643"},{"countryname":"Rwanda","iso2":"RW","iso3":"RWA","iso3number":"646"},{"countryname":"S. Georgia and S. Sandwich","iso2":"GS","iso3":"SGS","iso3number":"239"},{"countryname":"Saint Helena","iso2":"SH","iso3":"SHN","iso3number":"654"},{"countryname":"Saint Lucia","iso2":"LC","iso3":"LCA","iso3number":"662"},{"countryname":"Saint Martin","iso2":"MF","iso3":"MAF","iso3number":"663"},{"countryname":"Saint Pierre and Miquelon","iso2":"PM","iso3":"SPM","iso3number":"666"},{"countryname":"Saint-Barthélemy","iso2":"BL","iso3":"BLM","iso3number":"652"},{"countryname":"Samoa","iso2":"WS","iso3":"WSM","iso3number":"882"},{"countryname":"San Marino","iso2":"SM","iso3":"SMR","iso3number":"674"},{"countryname":"Sao Tomé and Principe","iso2":"ST","iso3":"STP","iso3number":"678"},{"countryname":"Saudi Arabia","iso2":"SA","iso3":"SAU","iso3number":"682"},{"countryname":"Senegal","iso2":"SN","iso3":"SEN","iso3number":"686"},{"countryname":"Serbia","iso2":"RS","iso3":"SRB","iso3number":"688"},{"countryname":"Seychelles","iso2":"SC","iso3":"SYC","iso3number":"690"},{"countryname":"Sierra Leone","iso2":"SL","iso3":"SLE","iso3number":"694"},{"countryname":"Singapore","iso2":"SG","iso3":"SGP","iso3number":"702"},{"countryname":"Sint Maarten","iso2":"SX","iso3":"SXM","iso3number":"534"},{"countryname":"Slovakia","iso2":"SK","iso3":"SVK","iso3number":"703"},{"countryname":"Slovenia","iso2":"SI","iso3":"SVN","iso3number":"705"},{"countryname":"Solomon Islands","iso2":"SB","iso3":"SLB","iso3number":"90"},{"countryname":"Somalia","iso2":"SO","iso3":"SOM","iso3number":"706"},{"countryname":"South Africa","iso2":"ZA","iso3":"ZAF","iso3number":"710"},{"countryname":"South Sudan","iso2":"SS","iso3":"SSD","iso3number":"728"},{"countryname":"Spain","iso2":"ES","iso3":"ESP","iso3number":"724"},{"countryname":"Sri Lanka","iso2":"LK","iso3":"LKA","iso3number":"144"},{"countryname":"St. Kitts and Nevis","iso2":"KN","iso3":"KNA","iso3number":"659"},{"countryname":"St. Vincent and Grenadines","iso2":"VC","iso3":"VCT","iso3number":"670"},{"countryname":"Sudan","iso2":"SD","iso3":"SDN","iso3number":"729"},{"countryname":"Suriname","iso2":"SR","iso3":"SUR","iso3number":"740"},{"countryname":"Svalbard and Jan Mayen","iso2":"SJ","iso3":"SJM","iso3number":"744"},{"countryname":"Swaziland","iso2":"SZ","iso3":"SWZ","iso3number":"748"},{"countryname":"Sweden","iso2":"SE","iso3":"SWE","iso3number":"752"},{"countryname":"Switzerland","iso2":"CH","iso3":"CHE","iso3number":"756"},{"countryname":"Syria","iso2":"SY","iso3":"SYR","iso3number":"760"},{"countryname":"Taiwan","iso2":"TW","iso3":"TWN","iso3number":"158"},{"countryname":"Tajikistan","iso2":"TJ","iso3":"TJK","iso3number":"762"},{"countryname":"Tanzania","iso2":"TZ","iso3":"TZA","iso3number":"834"},{"countryname":"Thailand","iso2":"TH","iso3":"THA","iso3number":"764"},{"countryname":"Timor-Leste","iso2":"TL","iso3":"TLS","iso3number":"626"},{"countryname":"Togo","iso2":"TG","iso3":"TGO","iso3number":"768"},{"countryname":"Tokelau","iso2":"TK","iso3":"TKL","iso3number":"772"},{"countryname":"Tonga","iso2":"TO","iso3":"TON","iso3number":"776"},{"countryname":"Trinidad and Tobago","iso2":"TT","iso3":"TTO","iso3number":"780"},{"countryname":"Tunisia","iso2":"TN","iso3":"TUN","iso3number":"788"},{"countryname":"Turkey","iso2":"TR","iso3":"TUR","iso3number":"792"},{"countryname":"Turkmenistan","iso2":"TM","iso3":"TKM","iso3number":"795"},{"countryname":"Turks and Caicos Is.","iso2":"TC","iso3":"TCA","iso3number":"796"},{"countryname":"Tuvalu","iso2":"TV","iso3":"TUV","iso3number":"798"},{"countryname":"Uganda","iso2":"UG","iso3":"UGA","iso3number":"800"},{"countryname":"Ukraine","iso2":"UA","iso3":"UKR","iso3number":"804"},{"countryname":"United Arab Emirates","iso2":"AE","iso3":"ARE","iso3number":"784"},{"countryname":"United Kingdom","iso2":"GB","iso3":"GBR","iso3number":"826"},{"countryname":"United States Minor Outlying Islands","iso2":"UM","iso3":"UMI","iso3number":"581"},{"countryname":"United States of America","iso2":"US","iso3":"USA","iso3number":"840"},{"countryname":"United States Virgin Islands","iso2":"VI","iso3":"VIR","iso3number":"850"},{"countryname":"Uruguay","iso2":"UY","iso3":"URY","iso3number":"858"},{"countryname":"Uzbekistan","iso2":"UZ","iso3":"UZB","iso3number":"860"},{"countryname":"Vanuatu","iso2":"VU","iso3":"VUT","iso3number":"548"},{"countryname":"Vatican City","iso2":"VA","iso3":"VAT","iso3number":"336"},{"countryname":"Venezuela","iso2":"VE","iso3":"VEN","iso3number":"862"},{"countryname":"Viet Nam","iso2":"VN","iso3":"VNM","iso3number":"704"},{"countryname":"Virgin Islands, British","iso2":"VG","iso3":"VGB","iso3number":"92"},{"countryname":"Wallis and Futuna","iso2":"WF","iso3":"WLF","iso3number":"876"},{"countryname":"Western Sahara","iso2":"EH","iso3":"ESH","iso3number":"732"},{"countryname":"Yemen","iso2":"YE","iso3":"YEM","iso3number":"887"},{"countryname":"Zambia","iso2":"ZM","iso3":"ZMB","iso3number":"894"},{"countryname":"Zimbabwe","iso2":"ZW","iso3":"ZWE","iso3number":"716"}]; 

$(function(){ 
    var temp = []; 
    for (i = 0;i<items.length;i++) 
    { 
     temp.push(items[i]['countryname']); 
    } 

    $("#inputText").autocomplete({ 
     source: temp 
    }); 


}); 

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<input type="text" id="inputText"> 

的參考jQuery的自動完成：http://jqueryui.com/autocomplete/

Answer 3

已經有兩個答案指jQuery的自動完成功能，以及一個與實施。但其中一個答案使用靜態數據。這是我將如何實現它，使用動態數據：

var url = "https://ws.postcoder.com/pcw/PCW45-12345-12345-1234X/country?format=json"; 
 

 
var countries = []; 
 

 
$.ajax(url).done(function(data) { 
 
\t console.log(data); 
 
    countries = data; 
 
    $("#countries").autocomplete({ 
 
    \t source: function(request, response) { 
 
    \t var term = request.term; 
 
     
 
     var filteredData = countries.filter(function(item) { 
 
     \t return item.countryname.toLowerCase().indexOf(term.toLowerCase()) >= 0; 
 
     }); 
 
     
 
     var responseData =[]; 
 
     filteredData.forEach(function(item) { 
 
     \t responseData.push({ 
 
     \t label: item.countryname, 
 
      value: item.countryname 
 
     }); 
 
     }); 
 
     
 
     response(responseData); 
 
    } 
 
    }); 
 
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<input id="countries">

JS小提琴：https://jsfiddle.net/ub129ww3/