如何将json数据传递给jquery自动完成

时间:2010-01-23 12:33:40

标签: php jquery json autocomplete

Hai guys,

有人可以帮我把这个json数据传递给jquery自动完成插件......因为我是jquery的新手,我不知道怎么做...

[{"0":"1","id":"1","1":"Albania","country":"Albania"}, 
{"0":"2","id":"2","1":"Algeria","country":"Algeria`"}, 
{"0":"3","id":"3","1":"Angola","country":"Angola"}, 
{"0":"4","id":"4","1":"Anguilla","country":"Anguilla"}, 
{"0":"5","id":"5","1":"Antigua","country":"Antigua"}, 
{"0":"6","id":"6","1":"Argentina","country":"Argentina"}, 
{"0":"7","id":"7","1":"Armenia","country":"Armenia"}, 
{"0":"8","id":"8","1":"Aruba","country":"Aruba"}, 
{"0":"9","id":"9","1":"Australia","country":"Australia"}, 
{"0":"10","id":"10","1":"Austria","country":"Austria"}, 
{"0":"11","id":"11","1":"Azerbaijan","country":"Azerbaijan"}, 
{"0":"26","id":"26","1":"Bulgaria","country":"Bulgaria"}, 
{"0":"27","id":"27","1":"Burkina Faso","country":"Burkina Faso"}] 

3 个答案:

答案 0 :(得分:2)

json来自哪里?除非它必须是JSON,否则最好将它放在另一种格式中; jquery.autocomplete插件似乎没有内置JSON处理,所以你必须自己编写处理函数。

假设此数据永远不会更改,您可以将其保存为JavaScript文件(例如countries.js)。使用以下格式:

var countries = [
 { id: 1, country: "Albania" }, 
 { id: 2, country: "Algeria`" }, 
 { id: 3, country: "Angola" }, 
 { id: 4, country: "Anguilla" }, 
 { id: 5, country: "Antigua" }, 
 { id: 6, country: "Argentina" }, 
 { id: 7, country: "Armenia" }, 
 { id: 8, country: "Aruba" }, 
 { id: 9, country: "Australia" }, 
 { id: 10, country: "Austria" }, 
 { id: 11, country: "Azerbaijan" }, 
 { id: 26, country: "Bulgaria" }, 
 { id: 27, country: "Burkina Faso" }
];

然后,这就是你在主文件中调用插件的方式:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<script src="jquery.js"></script>
<script src="jquery.autocomplete.js"></script>
<script src="countries.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />

<script type="text/javascript">
$().ready(function() {


 $("#menu").autocomplete(countries, {
  minChars: 0,
  width: 310,

  matchContains: true,
  autoFill: false,
  formatItem: function(row, i, max) {
   return row.country;
  },
  formatMatch: function(row, i, max) {
   return row.country;
  },
  formatResult: function(row) {
   return row.id;
  }
 });

});

</script>

</head>

<body>

 <form autocomplete="off">
  <p>
   <label>Countries:</label>
   <input type="text" id="menu" />
   <input type="button" value="Get Value" />
  </p>

</body>
</html>

答案 1 :(得分:0)

答案 2 :(得分:0)

将此json保存到文件中并在自动完成插件设置中链接到该文件。