A number of people have asked me over the past few days how should one go about using jQuery Autocomplete but instead of using newline delimiters, with a URL that returns JSON data.
At first, I first had a hack that involved handling the “keyup” event myself then sending a request to a JSON URL, and then involve the “autocompleteArray” method from Autocomplete. It was a mess considering that the autocomplete method is already sending the value of your defined input to the server as a GET parameter. I was repeating the behavior of the function in order to receive a simple JSON array. I was unhappy, and felt it to be a very annoying solution because I wanted to take advantage of the internal caching system of jQuery Autocomplete.
So I decided to give a look at the code and came up with a much cleaner solution. I directly added a JSON option to the Autocomplete. So for anyone interested you can find the patch here: jQuery Autocomplete JSON patch.
The first step thing you’ll need is to patch Autocomplete using the patch command (Google patch) and then include the jQuery and Autocomplete JavaScript sources into your code.
1
2
3
4
5
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery.autocomplete.js”></script>
<style type=”text/css”>
@import “jquery.autocomplete.css”;
</style>
Once you are done, you need to setup your input field on which the autocomplete calls and function is going to be executed from.
1
<input type=”text” size=”25″ id=”input” />
And of course you need to make the event hook to make sure your autocomplete is done but in the hook you need to make sure the new option “json” is set to true. This is how you proceed:
1
2
3
$(function() {
$(‘#input’).autocomplete(‘url.php’, {json: true});
});
The complete version should look somewhat like:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<style type=”text/css”>
@import “jquery.autocomplete.css”;
</style>
</head>
<body>
<label for=”input”>Input any text</label>
<input type=”text” id=”input” />
</body>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery.autocomplete.js”></script>
<script type=”text/javascript”>
$(function() {
$(‘#input’).autocomplete(‘url.php’, {json: true});
});
</script>
</html>
You can even try it now if you want.
