CODEWITHSUNDEEP
jqueryjquery-uiautocompletejquery-autocompletescriptaculous
Chuck Le Butt
Chuck Le Butt

Reputation: 48758

jQuery Autocomplete using URL

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?

Upvotes: 1

Views: 5320

Answers (3)

Dogoku
Dogoku

Reputation: 4675

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

Upvotes: 1

Ateszki
Ateszki

Reputation: 2255

You can use Jquery autocomplete and use a function as the source, then on that function make your ajax call and parse the html from your script to an javascript array

Have a look at the jquery docs for autocomplete source property http://api.jqueryui.com/autocomplete/#option-source

Upvotes: 0

dnagirl
dnagirl

Reputation: 20456

Ok, since you don't wish to output JSON, try this:

var aclist = [];
$('input#myauto').autocomplete({
  source: aclist,
  change: function( event, ui ) {
              $.ajax({
                  url: 'search.php',
                  data: {
                      'inputID': inputID,
                      'destinationID': destinationID
                  },
                  dataType: 'html',
                  success: function (html) {
                      aclist = [];
                      $('li', html).each(function () {
                          aclist.push({
                              value: this.id,
                              label: $(this).text()
                          });
                      });
                  },
                  error: function (jqXHR, textStatus, errorThrown) {
                      aclist = [];
                  }
              });
  }
});

I haven't debugged it, but essentially the idea to to link an ajax call to the onChange event and translate the html returned by that call into an array of the proper format.

Upvotes: 1

Related Questions