jQuery的搜索JSON和填充表单字段(jQuery search JSON and popula

我拖网和＃1，一般的网络寻找一个答案。我已经找到了一些很好的建议（例如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"
    }
]

基本上我想允许用户输入一个地点到表单字段，然后有jQuery的搜索JSON文件中，找到邮政编码和国家比赛，并使用这些匹配的值来填充邮政编码和国家形式的文本字段

下面是我使用的形式，再加上一些测试的jQuery从拉http://af-design.com/ （我不能去工作-我的错，而不是源脚本）：

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

Should'nt它是这样吗？

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

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

Answer 2:

OK ......各地的网络更多的拖网和我是能够解决这一个了，多亏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);
            }
        });