jQuery 搜索 JSON 并填充表单字段答案

【问题标题】：jQuery search JSON and populate form fieldsjQuery 搜索 JSON 并填充表单字段
【发布时间】：2014-07-12 17:47:18
【问题描述】：

我已经在 Stackoverflow 和整个网络上搜索了这个问题的答案。我找到了一些很好的建议（例如http://af-design.com/blog/2010/05/12/using-jquery-uis-autocomplete-to-populate-a-form/），但无法让任何工作......完全是由于我的无知！

我有一个 JSON 文件，其中包含地区、州和邮政编码数据（缩短版）：

[
    {
      "PCODE":7255,
      "LOCALITY":"LOCCOTA",
      "STATE":"TAS"
    },
    {
       "PCODE":7255,
       "LOCALITY":"LUGHRATA",
       "STATE":"TAS"
    },
    {
       "PCODE":7255,
       "LOCALITY":"MEMANA",
       "STATE":"TAS"
    }
]

基本上，我希望允许用户在表单字段中输入 Locality，然后让 jQuery 搜索 JSON 文件，找到 Postcode 和 State 的匹配项，并使用这些匹配值填充 Postcode 和 State 表单文本字段

这是我正在使用的表单以及从http://af-design.com/ 提取的一些测试 jQuery（我无法开始工作 - 是我的错，不是源脚本）：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<style>
    label{
   float:left;
   width:80px;
}

</style>

<link rel="stylesheet" href="http://static.jquery.com/ui/css/base2.css" type="text/css"     media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"   type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){
var ac_config = {
    source: "p-codes.json",
    select: function(event, ui){
        $("#city").val(ui.item.LOCALITY);
        $("#state").val(ui.item.STATE);
        $("#zip").val(ui.item.PCODE);
    },
    minLength:1
};
$("#city").autocomplete(ac_config);
});
</script>

</head>
<body>

<form action="#" method="post">
 <p><label for="city">City</label><br />
     <input type="text" name="city" id="city" value="" /></p>
 <p><label for="state">State</label><br />
     <input type="text" name="state" id="state" value="" /></p>
 <p><label for="zip">Zip</label><br />
     <input type="text" name="zip" id="zip" value="" /></p>
</form>

</body>
</html>

任何帮助或建议将不胜感激！

问候，

湄公河

【问题讨论】：

标签： jquery json forms autocomplete

【解决方案1】：

不应该这样吗？

.autocomplete({
        source: function( request, response ) {
          $.getJSON( "p-codes.json", {
            term: extractLast( request.term )
          }, response );
        }
      });

http://jqueryui.com/autocomplete/#remote

【讨论】：

您好亚瑟，感谢您的建议！实际上，您提醒我原来的脚本（上图）是 jQuery UI 自动完成小部件的一部分（或派生自）。我没有意识到这一点。因此，我能够通过更具体地搜索 jQ UI 自动完成来回答这个问题。

【解决方案2】：

好的...在网络上再拖网一些，我能够解决这个问题，感谢http://www.jensbits.com/ 现在一切正常。

$("#state").autocomplete({
            source: function( request, response ) {
            $.ajax({
                url: "location.json",
                dataType: "json",
                data: {term: request.term},
                success: function(data) {
                            response($.map(data, function(item) {
                            return {
                                label: item.state,
                                id: item.id,
                                abbrev: item.abbrev
                                };
                        }));
                    }
                });
            },
            minLength: 2,
            select: function(event, ui) {
                $('#state_id').val(ui.item.id);
                $('#abbrev').val(ui.item.abbrev);
            }
        });

【讨论】：