Question

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

这就是为什么我想在JSON文件中存储邮政编码信息并在用户选择状态时从中获取数据的原因，邮政编码会在邮政编码文本字段中自动生成。例如，当用户选择＆＃34;吉隆坡＆＃34;从selectbox的下拉列表中，它应该自动生成＆＃34; 57000＆＃34;在邮政编码文本字段中存储在JSON文件中的数据。

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中的相应数据更新zipcode文本字段。

<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>

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

1 个答案: