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?

The jquery autocomplete example for remote access is here: jqueryui.com/autocomplete/#remote Why do you wish to avoid JSON? Assumably your script has an array that it currently outputs as an HTML list. Why not just output it as a JSON array? — dnagirl
– dnagirl, Commented Mar 6, 2013 at 17:56
I was just hoping to avoid rewriting the existing code as much as possible. The client hasn't asked for this, I just don't want to leave the site using both Prototype and jQuery -- which it is at the moment :-/ — Chuck Le Butt
– Chuck Le Butt, Commented Mar 6, 2013 at 17:59
@dnagirl Thanks. Yes, it just means processing the data twice: Once for JSON and then again out of JSON and into HTML. Keeping it one step would be simpler -- although I guess not by much. — Chuck Le Butt
– Chuck Le Butt, Commented Mar 6, 2013 at 18:08

Dogoku · Accepted Answer · 2013-03-07 14:00:32Z

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

edited Mar 7, 2013 at 14:00

answered Mar 6, 2013 at 17:42

Dogoku

4,6754 gold badges27 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Chuck Le Butt Over a year ago

This uses JSON, making it exactly the same as the jQuery solution...?

Dogoku Over a year ago

I was hoping you would give JSON a try, perhaps i should have specified that. If all you need is to perform an ajax request and put the results in a <ul> then you can do that with a few lines of jquery. I can provide a basic example of that if you wish

Chuck Le Butt Over a year ago

If that's my only option, I'll certainly accept your answer if you can. Thanks!

Dogoku Over a year ago

fixed a couple of typos too

Chuck Le Butt Over a year ago

This obviously works OK, but there's nothing to actually allow the user to select something from the list :)

|

dnagirl · Accepted Answer · 2013-03-06 18:34:50Z

1

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.

answered Mar 6, 2013 at 18:34

dnagirl

20.5k13 gold badges86 silver badges127 bronze badges

1 Comment

Chuck Le Butt Over a year ago

Thanks for the help. I think Dogoku beat you to it :)

Ateszki · Accepted Answer · 2013-03-06 18:40:17Z

0

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

answered Mar 6, 2013 at 18:40

Ateszki

2,2531 gold badge16 silver badges14 bronze badges

Collectives™ on Stack Overflow

jQuery Autocomplete using URL

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related