ansaurus

Question

How to Pass json data to jquery autocomplete

Answer 1

A:

http://ru2.php.net/manual/en/function.json-encode.php http://ru2.php.net/manual/en/function.json-decode.php

nex2hex 2010-01-23 12:38:46

Answer 2

A:

save this json to a file and link to it in the autocomplete plugin settings.

antpaw 2010-01-23 14:16:04

Answer 3

+1 A:

Where is the json coming from? Unless it has to be JSON, it may be better to put it in another format; the jquery.autocomplete plugin does not appear to have built in JSON handling so you would have to write handling functions yourself.

Assuming this data never changes, you can save it to a JavaScript file (say, countries.js) instead. Use the following format:

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" }
];

Then, this is how you'd call the plugin in your main file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<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>

Jordan Reiter 2010-01-23 15:31:44

ansaurus

tags:

views:

answers:

How to Pass json data to jquery autocomplete

related questions