jQuery的搜索JSON和填充表单字段 [英] jQuery search JSON and populate form fields
问题描述
我拖网和＃1，一般在网络寻找一个答案。我发现了一些很好的建议（例如的http://af-design.com/blog/2010/05/12/using-jquery-uis-autocomplete-to-populate-a-form/)但不能得到任何工作......完全是由于我的无知！
I've trawled Stackoverflow and the web in general looking for an answer to this. I've found some good suggestions (e.g http://af-design.com/blog/2010/05/12/using-jquery-uis-autocomplete-to-populate-a-form/) but can't get any to work ... completely due to my ignorance!
我有一个包含一个局部性JSON文件，国家和邮政code数据（缩短版）：
I have a JSON file containing a Locality, State and Postcode data (shortened version):
[
{
"PCODE":7255,
"LOCALITY":"LOCCOTA",
"STATE":"TAS"
},
{
"PCODE":7255,
"LOCALITY":"LUGHRATA",
"STATE":"TAS"
},
{
"PCODE":7255,
"LOCALITY":"MEMANA",
"STATE":"TAS"
}
]
基本上我想允许用户输入一个地点到表单字段，然后有jQuery的搜索JSON文件，找到后code和国家的匹配，并使用这些匹配的值来填充帖子code与国家形式的文本字段
Basically I want to allow a user to enter a Locality into a form field and then have jQuery search the JSON file, find a match for Postcode and State and use those matching values to populate Postcode and State form text fields
下面是我使用的形式加上一些测试的jQuery从 http://af-design.com/（我不能去上班 - 我的错，而不是源脚本）：
Here's the form I'm using plus some test jQuery pulled from http://af-design.com/ (which I can't get to work - my fault, not source script):
<!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>
任何帮助或建议将是多少AP preciated！
Any help or suggestions would be much appreciated!
问候，
湄公河
推荐答案
在网络各地的行...有点拖网和我能够这一个梳理，感谢的 http://www.jensbits.com/ 所有现在的工作。
OK ... a bit more trawling around the web and I was able to sort this one out, thanks to http://www.jensbits.com/ All working now.
$("#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和填充表单字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
