文章/答案/技术大牛

发布

社区首页 >问答首页 >根据选择框选项或自动完成选择，使用来自JSON的数据设置文本输入

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

Stack Overflow用户

提问于 2017-07-17 08:48:37

回答 1查看 1.3K关注 0票数 0

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

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

javascript

html

json

zipcode

form-fields

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-07-18 06:35:24

最后，我解决了我的问题。我使用的是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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45134612

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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