jQuery autocomplete does not work when using remote source

Question

HTML:

<input type="text" id="shop-id">

JS:

$(document).ready(function(){

    $( "#shop-id" ).autocomplete({
        source: "/ticket/get_sids",
        select: function(event, ui){
          //...
        }
    });

});

There is a strange autocomplete issue. If I declare the source with a static variable like this

    var data = ["0200","0032"];

    $( "#shop-id" ).autocomplete({
        source: "/ticket/get_sids"
    });

everything is like expected.

But with the dynamic source url the autocomplete does not seem to filter the search. It's like no matter what I input as search text, autocomplete opens the entire source without filtering. E.g. I type a "g" and it opens 0200, 0032 but it shouldn't because "g" does not match anything in the source.

The dynamic source returns pure json like: ["0200","0032"]. It's a php page:

return new Response(json_encode($data));

which returns

["0200","0032"]

in the browser window.

Environment: jQuery 1.7.2 jQuery-Ui 1.8.2

Community · Accepted Answer · 2017-05-23 11:49:08Z

1

You're missing the data parameter which you'll be using to send back the filter value... if that makes any sense. So you'd need to implement some form of server side filtering before returning the response data

" I type a "g" and it opens 0200, 0032 but it shouldn't because "g" does not match anything in the source."

$(document).ready(function(){

    $( "#shop-id" ).autocomplete({
        source: "/ticket/get_sids",
        select: function(event, ui){
          //...
        },
       data: { term: request.term   }  //"term" could be anything, based on parameters your server side method expects
        //...
     })
 });

I've answered a question similar to this before. hope this helps? https://stackoverflow.com/a/11930525/1105314

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Sep 17, 2012 at 11:15

Rohan Büchner

5,4035 gold badges66 silver badges108 bronze badges

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

Comments

o_nix · Accepted Answer · 2012-09-17 11:35:06Z

1

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.

answered Sep 17, 2012 at 11:35

o_nix

1,1461 gold badge16 silver badges30 bronze badges

Collectives™ on Stack Overflow

jQuery autocomplete does not work when using remote source

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related