jQuery UI autocomplete multiple input controls with multiple JSON sources

Question

I have this code working, from this example:

var url = function(req, res){
    $.ajax({
        url: "getdata",
        dataType: "json",
        data: {
            term: req.term,
        },
        success: function(data){
            res($.map(data.students, function(item){
            return{
                label: item.cardId + "|" + item.firstName + " " + item.lastName,
                value: item.cardId
            }}))
        }
    });
};


$("#autocomplete").autocomplete({
    source: url
});
$("#autocomplete2").autocomplete({
    source: url
});

And input elements:

<input path="students" id="autocomplete" style="z-index: 100; position: relative" title="type &quot;a&quot;" autofocus="autofocus" />
<input path="items" id="autocomplete2" style="z-index: 100; position: relative" title="type &quot;a&quot;" />

Both inputs have now the same dropdown list.

Question:
How to change url function to fit students and items? Or should just copy function for each type of input?

Salman Arshad · Accepted Answer · 2014-01-21 10:14:59Z

4

Inside your url function, this.element will give you the element which fired autocomplete. You can use this.element.attr("id") or some other method to modify the JSONP url.

Demo here and code here

edited Jan 21, 2014 at 10:14

answered Jun 17, 2011 at 13:05

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

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

1 Comment

Solata Over a year ago

It works! After hours of banging my head against the wall! Amazing Demo, thank for the tip!

Collectives™ on Stack Overflow

jQuery UI autocomplete multiple input controls with multiple JSON sources

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related