根據選擇框選項或自動完成選擇設置帶有JSON數據的文本輸入

Question

我有分類網站，用戶輸入每個提交的新廣告的位置信息，其中顯示了Google地圖邊欄上的位置。但是，除非使用正確的郵政編碼，否則Google地圖無法正確顯示。我試圖解決這個問題，但無法解決。用戶通常不知道郵政編碼，他們可能會忽略它。

這就是爲什麼我要將郵政編碼信息存儲在JSON文件中並在用戶選擇某個州時從中獲取數據的原因，郵政編碼是在郵政編碼文本框中自動生成的。例如，當用戶從選擇框中的下拉列表中選擇「吉隆坡」時，它應該從存儲在JSON文件中的數據中自動在郵政編碼文本字段中生成「57000」。

My JSfiddle

<label>State</label> 
<select name="cp_state" id="cp_state" class="dropdownlist required"><option value="">-- Select --</option><option value="Kuala Lumpur" selected="selected">Kuala Lumpur</option><option value="Labuan">Labuan</option><option value="Malacca">Malacca</option>    </select> 

<label>Zip/Postal Code </label> 
<input name="cp_zipcode" id="cp_zipcode" type="text" class="text" placeholder="Enter zipcode" /> 

JSON數據

[ 
    { 
     "czipcode": "57000", 
     "cstate": "Kuala Lumpur" 
    }, 
    { 
     "czipcode": "75000", 
     "cstate": "Labuan" 
    }, 
    { 
     "czipcode": "87000", 
     "ctate": "malacca" 
    } 
] 

Answer 1

最後，我解決我的問題。我使用Ajax AutoComplete for jQuery，此外還增加了自動完成功能，該功能在用戶輸入與json值不斷匹配的文本字段內時顯示。點擊該建議後，它將更新郵政編碼文本字段和json中存儲的相應數據。

<label>State</label> 
<input type="text" name="cstate" id="autocomplete"/><br><br><br> 
<label>Zipcode</label> 
<input id="zipcode" type="text" name="zipcode"/> 

<script type="text/javascript" src="au/scripts/jquery-1.8.2.min.js"></script> 
<script type="text/javascript" src="au/scripts/jquery.mockjax.js"></script> 
<script type="text/javascript" src="au/src/jquery.autocomplete.js"></script> 
<script> 
var cstates = [ 
    { value: 'Kuala Lumpur', data: '57000' }, 
    { value: 'Labuan', data: '75000' }, 
    { value: 'Malacca', data: '87000' } 
    ]; 

$('#autocomplete').autocomplete({ 
    lookup: cstates, // lookup suggestion from cstates json 
    lookupLimit: 2,  //limit suggestion result display 
    onSelect: function (suggestion) { 
     $('#zipcode').val(suggestion.data);//set zipcode textfield with the data of state clicked 
    } 
}); 
</script>