jQuery Autocomplete using URL

Question

I've been working on a site that currently uses Prototype+Scriptaculous's Ajax.Autocomplete. It works great at the moment, but I need to convert it to jQuery.

I know that jQueryUI has an Autocomplete, but I can't see if there's a way to use the existing external URL without needing to change it.

With Scriptaculous's Ajax.Autocomplete it's extremely simple:

new Ajax.Autocompleter('inputID', 'destinationID', 'search.php', {
    paramName: 'q',
    minChars: 2,
    frequency: 0.4,
    indicator: 'loading'
    });

It's almost self-explanatory: inputID is the ID of the <input>, destinationID is the element you want the results to be displayed in. search.php is the page that returns the results from your database -- including the HTML you want displayed in the list.

The rest of the options should be pretty obvious :)

search.php?q=search-query current returns nicely formatted HTML like this:

<ul>
    <li id="ID">Result</li>
    <li id="ID">Result</li>
    <li id="ID">Result</li>
</ul>

It would be great if I could just use this with the jQueryUI Autocomplete, but I don't know if it's possible (and if it is, how to do it).

I've looked through a bunch of tutorials on using jQueryUI's Autocomplete, but they all seem to focus on either either using a Javascript array (useless to me, since I have thousands of records to search through in a database), or JSON (which I'm hoping to avoid if possible).

Can it be done?

Answer 1

EDIT: Manual jQuery

Please try this code, I did not test it, so there might be a bug or two. Also this assumes /search.php is on the same domain. Edit values in settings as you require

$(function () {

   var debounce;

   var settings = {
       input: '#inputID',
       dest: '#destID',
       url: '/search.php?q=',
       minLength: 2,
       debounceDelay: 200
   }

   $(settings.input).on('keyup', function () {
       var q = this.value;

       if (debounce) clearTimeout(debounce);

       if (q && q.length >= settings.minLength)
       {
           debounce = setTimeout(function () {doSearch(q);},
                                 settings.debounceDelay);
       }

   });

   $(settings.dest).on("click", "li", function (e) {
       $(settings.input).val($(this).text());
       $(settings.dest).empty();
   })

   function doSearch(query) {
       $(settings.dest).load(settings.url + query);
   };

});

---

JSON Approach

have a look at twitter's typeahead, just recently released. (not be confused with bootstrap's typeahead, this is completely standalone and only requires jquery)

http://twitter.github.com/typeahead.js/

It behaves just like google's searchbox

• autocomplete
• autosuggest
• keyboard support
• multiple sources, both local and remote
• result caching (localStorage) & request throttling
• template support (requires a mustache compatible templating engine, e.g Hogan)

If you need any explanation on how to use it, check the examples or comment below