jquery-autocomplete with json array

Question

I was wondering how I would be able to get this working? I've read the demo files, but I'm curious if there is a way to make it work like this. I've got one php file that is something like this

$query = "SELECT DISTINCT City FROM Locations ORDER BY City";
foreach($DBH->query($query) as $row)
{
    $array[] = $row['City'];
}
echo json_encode($array);

and some js

$('.searchbox').autocomplete('test.php', {minChars: 3,});

When I test it, I type in three letters, and instead of suggestions, I get the whole json array. I know that it's possible for this jquery-autocomplete to work with local data, but I just don't know how. https://github.com/dyve/jquery-autocomplete/ is the source, by the way.

Denys Séguret · Accepted Answer · 2012-06-27 06:21:47Z

2

When you provide your url 'test.php' as a source for the autocompletion, your page must compute the names finishing by the provided 'term' request parameter.

From the documentation :

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 Autocomplete plugin does not filter the results, instead the request parameter "term" gets added to the URL, which the server-side script should use for filtering the results. The data itself can be in the same format as the local data described above.

That means you must use the term request parameter in your SQL query to filter the results, for example

$query = "SELECT DISTINCT City FROM Locations where City like '".$term."%' ORDER BY City";

answered Jun 27, 2012 at 6:21

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

Comments

jimr · Accepted Answer · 2012-06-27 06:15:09Z

1

The docs say you should set a remoteDataType option whose value is json if your backend is returning a JSON Array:

remoteDataType (default value: false)

If this is set to 'json', the autocompleter expects a JSON array from the server. Any other settings, it defaults to the native text format using lineSeparator and Cellseparator (see below).

E.g.

$('.searchbox').autocomplete('test.php', {
  minChars: 3,
  remoteDataType: 'json'
});

Also, your server-side query should make use of the q parameter that the autocompleter sends in the GET to only return the results that match what has been typed in.

answered Jun 27, 2012 at 6:15

jimr

11.3k1 gold badge35 silver badges32 bronze badges

1 Comment

No_name Over a year ago

I was hoping to avoid GET because that would raise the complexity of the php file. It really is just a simple array on a table, and I think pulling data from it once would be less load on the server. Anyhow, specifying remoteDataType worked like a charm. Thanks!

Shehzad Bilal · Accepted Answer · 2012-06-27 06:10:11Z

0

Send Your input text as GET variable to your test.php file and apply filter to your query using that variable.

answered Jun 27, 2012 at 6:10

Shehzad Bilal

2,5132 gold badges19 silver badges27 bronze badges

Collectives™ on Stack Overflow

jquery-autocomplete with json array

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related