根据选择框选项或自动完成选择，使用来自 JSON 的数据设置文本输入

Question

我有一个分类网站，用户为每个提交的新广告输入位置信息，该信息在谷歌地图侧边栏上显示位置。但是，除非使用正确的邮政编码，否则谷歌地图无法正确显示。我试图解决这个问题，但无法解决。用户通常不知道邮政编码，可能会忽略它。

这就是为什么我想在 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>