jquery ui autocomplete database

Question

I'd like to use jQuery UI autocomplete in order to load a list from my database but I don't know wich method I should use to do so.

I tried to use the "Remote datasource" method http://jqueryui.com/demos/autocomplete/#remote, but it obviously doesn't work.

I have the following code :

js:

$(function() {
    $("#client").autocomplete({
    source: "nom.php",
    minLength: 2,
        select: function(event, ui) {
        alert(ui);
        }
    });
});

html :

<label for="client">Client</label>
<input name="client" id="client" class="ui-autocomplete ui-widget-content ui-corner-all" />

php:

$query = "SELECT nom from personne";
$result = mysql_query($query, $db);

while($row = mysql_fetch_assoc($result)) {

foreach($row as $val)
    $tab[] = $val;

}

print json_encode($tab);

It does show all the values no matter what I enter, but when I copy the result of nom.php and past it next to source: it does work...

thank you for your helm

This should work. You have to check your logs, maybe do some very light javascript debugging with a tool like firebug (just to check if function is well called, and that 'nom.php' is called and returns good data). — Patrick
– Patrick, Commented May 20, 2010 at 14:39
I actually don't understand how this autocomplete works : when I debug with firefox I see that the response is ["Marion","AM","PE","AH","JP","FD"] no matter what I write, I expect the autocomplete to select the good values from this list, but it doesn't. When I write source: ["Marion","AM","PE","AH","JP","FD"], it does work properly. — copndz
– copndz, Commented May 21, 2010 at 7:49
I've found some kind of workaround but I'd prefer to understand what is wrong in my code. Here is the workaround: $query = "SELECT nom from employe WHERE nom LIKE '%" . addslashes($_GET['term']) . "%'"; — copndz
– copndz, Commented May 21, 2010 at 7:51
yes, you need to filter the items using a where clause... definitely... — jamiebarrow
– jamiebarrow, Commented Jul 30, 2010 at 8:41
you might also want to only select a limited number of results, say, the top 10/20 for example, maybe order them too — jamiebarrow
– jamiebarrow, Commented Jul 30, 2010 at 8:42

Øyvind Bråthen · Accepted Answer · 2011-06-14 10:44:47Z

3

The problem is that you are not filtering the results server side.

When you use a local collection, the local collection gets automatically filtered by autocomplete.

However, when using a remote source, the source is supposed to filter. I guess this is to save bandwidth so that the server only send the matching items, and not all items and let the browser filter at it's end.

When calling your server side method, autocomplete also sends a parameter called term that you can use to filter.

You can get hold of the entered value like this in your php script:

 $term = trim(strip_tags($_GET['term']));

Then in your foreach, only add the items matching the filter to your collection before you send it back again.

answered Jun 14, 2011 at 10:44

Øyvind Bråthen

60.9k28 gold badges128 silver badges154 bronze badges

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

Collectives™ on Stack Overflow

jquery ui autocomplete database

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related