jQuery UI Autocomplete: How can I pass additional data with my Ajax call?

Question

I have two jQuery UI Autocomplete widgets set up. With the first autocomplete, the user will enter a client's name - the autocomplete will narrow it down until the correct client has been chosen. I then have a callback that takes the ID of the client returned and puts it into a hidden input field.

Next, is a second autocomplete field. When searched in, this needs to send two variables to the server - the user's search string (term), and the User ID of the client that was searched for previously.

I have no problems dealing with the server side of things, but where I'm struggling is how to pass 2 variables to the Ajax call, rather than just term. In my PHP backend, I need to query against the User ID as well, to only return properties belonging to that user.

How can I do this?

Thanks!

Edit: Thanks to @JohnP, this was what I ended up - seems to work fine for me. Posting this here for reference for anyone in future who drops by:

source: function (request, response) {

    var request_data = {
        term: request.term,
        client_id: $('input#client_id_string').val()
    };

    var url = 'http://mysite.com/search/ajax_search';

    $.getJSON(url, request_data, function (data, status, xhr) {
         response(data);
    });
},

JohnP · Accepted Answer · 2011-11-01 11:30:02Z

1

You can override the source method if it's a static method.

//code
source: function (request, response) {
    var term = request.term;
     //caching if yo uwant
     var myCustomVar = 42;

     $.getJSON(url + term + '/' + myCustomVar , request, function (data, status, xhr) {
          response(data);
     });
},
//code

You can either make it part of the URL or just pass it along with the request, if you want.

edited Nov 1, 2011 at 11:30

answered Nov 1, 2011 at 10:30

JohnP

50k13 gold badges112 silver badges142 bronze badges

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

4 Comments

Jack Over a year ago

Thanks - I think this is the right way to go. But I see this error when I run it: Uncaught ReferenceError: _ac is not defined - any ideas? Thank you!

JohnP Over a year ago

sorry, that _ac bit was due to my code extending this for multiple instances use. I've cleared that out, this should give you what you need.

Jack Over a year ago

Thanks @JohnP - much appreciated. I experimented with what you posted a bit to get it to work, but I'm still a bit of a JS novice - I've posted what I ended up with on to the end of my answer, so perhaps you could confirm I'm doing it OK. There were a couple of bits I felt were unnecessary in your code so I simplified it a little to my needs.

JohnP Over a year ago

Yup, that's totally fine. It just looked a bit different because we cached the requests and we put in some extra code to make it easier to reuse.

Collectives™ on Stack Overflow

jQuery UI Autocomplete: How can I pass additional data with my Ajax call?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related