CODEWITHSUNDEEP
javascriptjqueryajaxjquery-uijquery-ui-autocomplete
Solata
Solata

Reputation: 1482

jQuery UI autocomplete multiple input controls with multiple JSON sources

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?

Upvotes: 1

Views: 5093

Answers (1)

Salman Arshad
Salman Arshad

Reputation: 272106

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

Upvotes: 4

Related Questions