JQuery autocomplete server-side matching

Question

I am trying to setup an autocomplete field.

I'v read the JQuery UI documentation, but all the example assume the source is a static list of items from which JQuery will pick matching entries (I mean static = the list is complete and doesn't depend on what the user typed).

Here is the code from the "remote datasource" example:

$( "#birds" ).autocomplete({
    source: "search.php",
    ...

I would like JQuery to call search.php?query=mytext (this URL returning a list of matching items) because I need to lookup suggestions in a database using PHP.

Is there a way to do that? Maybe I didn't understand the documentation?

Kolk

Great topic. I'm working on auto complete too, I'm trying to figure out server side php file that will search in database by let's say name and category. Did you find anything on this? Thans – Glauconite

@alexela Have a look at the answer to the question – Kolk

( not helping. Or i didnt find it. – Glauconite

Answer 1

from the jQuery UI Documentation on autocomplete:

Autocomplete can be customized to work with various data sources, by just specifying the source option. A data source can be:

• an Array with local data
• a String, specifying a URL
• a Callback

and further down

When a String is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The request parameter "term" gets added to that URL. The data itself can be in the same format as the local data described above.

have you tried the code you give? it should call the url search.php?term=mytext

Gley

Thank you! You understood exactly what I was looking for. I unfortunately missed that in the documentation, but I swear I read it many times cause I was sure there was a way to do that. – Kolk

(I did try the code but there's nothing obvious in the code to know that you have an additional GET parameter with the text in it) – Kolk

Answer 2

Here is a snippet of some client-side code I wrote a while back (changed to protect the innocent!) which does exactly as you want ...

    function ConfigureAutoComplete() {

        $('#myautocomplete').autocomplete({
            type: "POST",
            minLength: 3,
            source : function (request, response) 
            {                         
                var source_url = "../handlers/MyLookup.ashx?someparameter=" + $("#someparameter").val();

                $.ajax({
                    url: source_url,
                    dataType: "json",
                    data: request,
                    success: function (data) { response(data); },
                    error : function (a,b,c) { HandleLookUpError(a); }
                    });
            },                
            select: function (event, ui) { $('#result').val(ui.item.id); }               
        });
    }

As has already been said, your search.php page can return whatever you want it to. So you can narrow down the list on the server and return it to the client, which will then allow the user to pick from that list.

Charmion

Answer 3

Well search.php can return whatever it wants.

For static content you may want to do something like this:

$myList = array('pizza'=>array('mushrooms','pepperoni','olives'));
echo json_encode($myList);

That isn't far off from what a db call will give you.

Many frameworks in php return back an associative array after a find from the database. I believe (as I remember) even the standard mysql tools built into php do the same thing (or something similar).

json_encode/json_decode can help convert whatever you want in php to json. Then all you need to do is echo it out and the autocomplete will respond accordingly.

You are doing it correctly. You may just need to format it a little differently. What are you currently outputting from search.php?

Oh and I almost forgot you may need to specify that your output is jsonp (although sometimes you can get away with not doing that):

header('content-type: application/json; charset=utf-8');

Resist