Jquery Autocomplete showing an empty list

Question

Edit 2 : even better, multiple values works

Actually, one simply has to give a "value" field that fills the box. No need for the "id/label" field, but value field is required. This is working :

foreach ($queries as $query)
        {
          $results[] = [
            'zip' => $query->zip,
            'value' => $query->commune,
            'libelle' => $query->libelle,
            'lieudit' => $query->lieudit
          ];
        }
return Response::json($results);

Edit : here is the solution, thanks to Adyson's answer

The script should be json formatted and returning

An array of objects with label and value properties:

[ { label: "Choice1", value: "value1" }, ... ]

(jQuery API documentation)

So, modifying the PHP script like this will work :

foreach ($queries as $query)
        {
          $results[] = [
            'id' => $query->zip,
            'value' => $query->commune,
          ];
        }
return Response::json($results);

Original question

Using Jquery Autocomplete, querying a script.

The list shows as many rows as there are results (when I set my script to return X results, there are X rows as well in the list) :

But it doesn't fill the rows with the data. What could have gone wrong there ?

The data returned is some json :

Request URL:http://localhost:8000/search/autocomplete?term=750
Request Method:GET
Status Code:200 OK
Remote Address:127.0.0.1:8000
Response Headers
view source
Cache-Control:no-cache
Connection:close
Content-Type:application/json
Date:Tue, 15 Nov 2016 14:53:07 GMT
Host:localhost:8000

And here is the data :

[{"zip":"75004","commune":"PARIS 04","libelle":"PARIS","lieudit":""},
{"zip":"75005","commune":"PARIS 05","libelle":"PARIS","lieudit":""},
{"zip":"75003","commune":"PARIS 03","libelle":"PARIS","lieudit":""},
{"zip":"75006","commune":"PARIS 06","libelle":"PARIS","lieudit":""},
{"zip":"75008","commune":"PARIS 08","libelle":"PARIS","lieudit":""},
{"zip":"75012","commune":"PARIS 12","libelle":"PARIS","lieudit":""},
{"zip":"75015","commune":"PARIS 15","libelle":"PARIS","lieudit":""},
{"zip":"75016","commune":"PARIS 16","libelle":"PARIS","lieudit":""},
{"zip":"75017","commune":"PARIS 17","libelle":"PARIS","lieudit":""},
{"zip":"75010","commune":"PARIS 10","libelle":"PARIS","lieudit":""},
{"zip":"75018","commune":"PARIS 18","libelle":"PARIS","lieudit":""},
{"zip":"75001","commune":"PARIS 01","libelle":"PARIS","lieudit":""},
{"zip":"75009","commune":"PARIS 09","libelle":"PARIS","lieudit":""},
{"zip":"75014","commune":"PARIS 14","libelle":"PARIS","lieudit":""},
{"zip":"75002","commune":"PARIS 02","libelle":"PARIS","lieudit":""},
{"zip":"75007","commune":"PARIS 07","libelle":"PARIS","lieudit":""},
{"zip":"75011","commune":"PARIS 11","libelle":"PARIS","lieudit":""},
{"zip":"75013","commune":"PARIS 13","libelle":"PARIS","lieudit":""},
{"zip":"75019","commune":"PARIS 19","libelle":"PARIS","lieudit":""},
{"zip":"75020","commune":"PARIS 20","libelle":"PARIS","lieudit":""}]

Here is my JS :

$(function(){
     $( "#fromzip" ).autocomplete({
        source: "/search/autocomplete",
        dataType: 'json',
        minLength: 3,
     });
  });

The HTML :

<input 
      id="fromzip"
      name="fromzip"
      type="text"
      class="form-control"
      placeholder="69003"
      pattern=".{5}"
      title="5 numbers zip"
      maxlength="5"
      required >

And the PHP (Laravel Input, DB and Response facades) :

public function autocomplete(){
        $term = Input::get('term');
        $results = array();

        $queries = DB::table('zips')
          ->where('zip', 'LIKE', $term.'%')
          ->orWhere('libelle', 'LIKE', $term.'%')
          ->take(30)->get();

        foreach ($queries as $query)
        {
            $results[] = [ 'zip' => $query->zip,
            'commune' => $query->commune,
            'libelle' => $query->libelle,
            'lieudit' => $query->lieudit];
        }

        return Response::json($results);

      }

Everything works with this example : jqueryui.com/autocomplete so there is no ressources issue. This is clearly a data format issue, I dig there — tomsihap
– tomsihap, Commented Nov 15, 2016 at 15:18

ADyson · Accepted Answer · 2016-11-15 16:36:37Z

3

Have a look at http://api.jqueryui.com/autocomplete/#option-source. It states that the data must be in the format

[ { label: "Choice1", value: "value1" }, ... ]

Your sample data items don't have either of those properties (label or value).

You can modify your server-side script to output the right format, or if you can't/won't do that, you could use the source-as-a-function option in the plugin to write a function that transforms the data.

answered Nov 15, 2016 at 16:36

ADyson

62.9k16 gold badges88 silver badges100 bronze badges

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

2 Comments

tomsihap Over a year ago

This would apply for an array response (edit: according to the doc). Since my source is a string ("/search/autocomplete"), it requires a json formatted response, which the script gives

tomsihap Over a year ago

Sorry for my mistake ! The response should be json indeed, but still formated as you said. I have multiple values to get not just one so that's why I didn't understood why stucking with label->value format, but this belongs to another question.

Collectives™ on Stack Overflow

Jquery Autocomplete showing an empty list

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related