Web App Development - Systems Architecture - API Building - Security Audits

jQuery JSON Autocomplete

Posted by David in Open Source, echolibre, industry, jquery, json
Saturday, June 13th, 2009 at 12:14

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.

You can leave a response, or trackback from your own site.

Comments (3 Responses)

prasanta lahkar
July 3rd, 2009 at 15:47

This is what I was looking for. Its very impressive.

Chris
August 8th, 2009 at 18:36

Thanks. but did not work for me, as i am using cross domain.

David
September 8th, 2009 at 11:50

Actually @Chris it should. You can use the url.php script to make a request to your external domain. url.php should only behave as a proxy and you’ll be able to use any resultset from there.

Leave a comment




About this blog

We like to blog about things we're passionate about. We love PHP, MySQL, CouchDB, Linux, Apache - web development standards. We also like writing about building web apps and working with web technology.
You can email us on freedom@echolibre.com

Follow us on Twitter

Eamon Leonard - @EamonLeonard
David Coallier - @DavidCoallier
Helgi Þormar Þorbjörnsson - @h
J.D Fitz.Gerald - @jdfitzgerald
Noah Slater - @nslater
David Doran - @davidd

 

 

 

echolibre limited is registered in Ireland, company number 451576. Directors: Eamon Leonard, J.D Fitz.Gerald. Registered Office: 64 Dame Street, Dublin 2, Ireland.