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

Question

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

这就是为什么我想将邮政编码信息存储在 JSON 文件中并在用户选择一个州时从中获取数据，邮政编码在邮政编码文本字段中自动生成。例如，当用户从选择框的下拉列表中选择 "Kuala Lumpur" 时，它应该根据 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>

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

Set Text Input with Data from JSON depending on Selectbox Option or Autocomplete Selection

html

javascript

json

zipcode

form-fields