Question

我一直在搜索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>

非常感谢任何帮助或建议！

此致

湄公河

Answer 1

不应该这样吗？

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

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

Answer 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);
            }
        });

jQuery搜索JSON并填充表单字段

2 个答案: