Search jQuery

jQuery Forum

JQUERY Autocomplete with multiple sources

in Using jQuery UI • 6 years ago

Hi,

Is there a way to specify multiple sources (2 ajax requests) for JQUERY AutoComplete plugin?

Both requests should bind and show the results when they return from the server asynchronously.

$(".autocomplete").autocomplete({
        source: function (request, res) {
            request 1 : $.ajax({}); //show the results in autocomplete when results are returned
            request 2 : $.ajax({}); //show the results in autocomplete when results are returned
            ..
            ..
            ..
      },
      minLength: 1
});

Thanks

Replies(25)

jakecigar

Re: JQUERY Autocomplete with multiple sources

6 years ago

As long as you call the response callback (you called it res).

Autocomplete Widget | jQuery UI API Documentation

JΛ̊KE

jakecigar

Re: JQUERY Autocomplete with multiple sources

6 years ago

I decided to make a demo to show you the best way to do 2 ajax calls at the same time. Then use the data in a single use of the response callback.

autocomplete multiple ajax

Of course it is always better to merge the data in 1 ajax call.

JΛ̊KE

varunpadi..

Re: JQUERY Autocomplete with multiple sources

6 years ago

Hi Jake,

I don't want to wait till the response from both the request come back and then to concatenate the results.

Scenario is something like below :
Suppose Request 1 takes 5 seconds to return and Request 2 takes 20 seconds to return, then once i trigger both requests, after 5 secs, the response from request 1 should be binded to autocomplete and when response from request 2 arrives(may be show some progress icon in between), append the results from request 2 and bind the overall results.

So the criteria here is to bind the results to autocomplete and show results to the user as and when the response comes back from individual requests.

Thanks,

mike_laird

Re: JQUERY Autocomplete with multiple sources

6 years ago

varunpadival ,

You may be planning for something that won't happen. Do some testing with response times from your 2 databases. Well performing databases will respond to Autocomplete in sub-second time. From the US, I access a database in Europe that has 6 million entries, and my response time is measured in milliseconds.

If you really have 5 second + response time from your database, you have very serious problems in the database and should not be patching over it with Autocomplete code. Those kinds of problems will bite you and your users repeatedly. Go fix it.

jakecigar

Re: JQUERY Autocomplete with multiple sources

6 years ago

Search as I may, I have found no examples that make multiple calls to response. I do remember that once I did mistakenly call it for each response ,the result was quite horrible.

They best you could do is show one, concat the rest and have the user suffer with the an early selection being discarded and the list refreshing while the user is scrolling down.

JΛ̊KE

jakecigar

Re: Re: JQUERY Autocomplete with multiple sources

6 years ago

I updated my demo to call response 3 times. one for the first ajax that comes back, one for the second, and again for when they both come back.

JΛ̊KE

varunpadi..

Re: JQUERY Autocomplete with multiple sources

6 years ago

Hi Jake,

Thanks for the demo. I was looking something similar to this.

I have one more question : Is it possible to do any server operations and ignore the second response?

Eg: Results of 1st request returns and we show the results and 2nd request is triggered. Now User selects one item from 1st result. At this time, on selection, I need to go to server immediately (another ajax call where i need o process the user selection) without having to wait for the response from 2nd request.

Now what happens is:

1. Request 1 initiates.

2. Results from request 1 comes back and we show the results as autocomplete.

3. Request 2 initiates.

4. User selects a result from request 1.

5. User need to Wait this request 2 completes.

6. Request 2 completes.

7. User selection server call initiates.

What I want is

1. Request 1 initiates.

2. Results from request 1 comes back and we show the results as autocomplete.

3. Request 2 initiates.

4. User selects a result from request 1

7. User selection server call should initiate without having to wait for response from request 2.

This is something like threading which we need to implement in JS. I tried with "Web Workers" concept. But here also the XmlHttpRequest which i generate for Request 2 needs to complete after which the result selection triggers. Even though I terminate() the worker on selection of a result from request 1, the selection ajax call gets triggered only after Request 2 completes

Thanks

jakecigar

Re: JQUERY Autocomplete with multiple sources

6 years ago

My code…

Requests 1

Requests 2

Shows whichever comes back first,

Shows the second arrival, then shows both (pretty much at the same time, so you don’t see second only)

With a little massaging the code could cancel the outstanding ajax. But, if it comes back after the autocomplete is selected, it should be ignored. What do you see?

WOW, you’re using web workers. That’s great. I thought I was the only one doing web workers and ajax. I’d love to see what you came up with.

JΛ̊KE

varunpadi..

Re: JQUERY Autocomplete with multiple sources

6 years ago

Hi Jake,

So you mean if in the above example, if result from 1st request has come and I select an item (Request 2 is still under progress) and if I trigger an new request (Request 3) On Select then Request 3 will trigger immediately without having to wait for the response from Request 2.

Something like below:

$("input").autocomplete({

source: function (request, response) {

$.when(

$.getJSON("http://cors.jejaju.com/color.php", request, response),

$.getJSON("http://cors.jejaju.com/name.php", request, response)

).then(function (/*res1,res2*/) {

response(Array.prototype.map.call(arguments, function (res) {

return res[0]

}).reduce(function (p, c) {

return p.concat(c)

}))

// response(res1[0].concat(res2[0])) // combine them any which way you want.

})

minLength: 1,

select: function (event, ui) {

$.getJSON("http://cors.jejaju.com/color.php", function (data) { alert(data);});

}

})

Thanks

jakecigar

Re: JQUERY Autocomplete with multiple sources

6 years ago

I don’t see what your select code would help with.

JΛ̊KE

varunpadi..

Re: JQUERY Autocomplete with multiple sources

6 years ago

It was just an example to call server method on selection of an item.

What my requirement is that when the request of 2nd call is still inprogress and if I select a value from the response of 1st request, Ineed to go to the server on selection without having to wait for theresponse of 2nd request.

jakecigar

Re: JQUERY Autocomplete with multiple sources

6 years ago

You didn’t send any data along. And you would not call the same server program.

JΛ̊KE

varunpadi..

Re: JQUERY Autocomplete with multiple sources

6 years ago

Ya. I will not be calling the same server method.
I have a asmx file.
On typing in input, I will call 1.asmx/search1(request 1) then
1.asmx/search2(request 2)

Request 1 returns first and Request 2 is still on progress.( I show the results of request 1 in auto complete and show a progress image.) Now I select a item from results of request 1. I immediately call selection server call that is

1.asmx/SelectItem

What problem I am facing is until 1.asmx/Search2 returns, the call to 1.asmx/SelectaItem doesn't get called.

So my question is does the above example solve my purpose.

jakecigar

Re: JQUERY Autocomplete with multiple sources

6 years ago

I updated my demo name program to be very slow. Colors come back quickly.

$(function() {
$("input").autocomplete({
source: function(request, response) {
$.when(
$.getJSON("http://cors.jejaju.com/color.php",request,response),
$.getJSON("http://cors.jejaju.com/name.php",request,response)
).then(function(/*res1,res2*/){
response(Array.prototype.map.call(arguments,function(res){
return res[0]
}).reduce(function(p,c){
return p.concat(c)
}))
// response(res1[0].concat(res2[0])) // combine them any which way you want.
})
},
select:function(ui,result){
console.log(result)
},
minLength: 1
})
})

A very simple select just works.

JΛ̊KE

varunpadi..

Re: JQUERY Autocomplete with multiple sources

6 years ago

Yes. Selecting an item ad doing JS operations works. But calling an sever method makes to wait till other server operations completes.
This what I am stating above is in the case of calling $.ajax. But what I read is $.when is alternate to task parallel programming so may be I am wrong. Please correct me if I am wrong.

jakecigar

Re: JQUERY Autocomplete with multiple sources

6 years ago

I don’t think so. A web page can have several outstanding AJAX calls. Currently there are 2. You can certainly have one more to do something else while the slow one has not yet responded.

If it doesn’t work with your server programs, it may be a server program problem.

JΛ̊KE

jakecigar

Re: JQUERY Autocomplete with multiple sources

6 years ago

I updated my demo to do an extra ajax when a value is selected.

JΛ̊KE

varunpadi..

Re: JQUERY Autocomplete with multiple sources

6 years ago

Strange. I tried to implement the demo code which you gave in my project. My code goes as below.

$(".autocomplete").autocomplete({
source: function (request, response) {
var oCtrl = this.element;
ajaxes =
[
GetDBUsersList(request.term),
GetLDAPUsersList(request.term)
]
$.when.apply(0, ajaxes).then(function ( /*res1,res2*/) {
response(Array.prototype.map.call(arguments, function (res) {
return res[0];
}).reduce(function (p, c) {
return p.concat(c)
})
)
})
},
minLength: 1,
select: function (event, ui) {
}
});
}

The 2 functions GetDBUsersList() and GetLDAPUsersList() are the two $.ajax methods where GetDBUsersList always returns first and GetLDAPusersList will be slower (will search users from Active Directory).

function GetDBUserList(i_sSearchText) {
g_oDB_Ajax_Request = $.ajax({
type: "POST",
url: sURL + "/GetDBUSERList",
data: " {'i_sPrefix': '" + i_sSearchText + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
crossDomain: false,
jsonp: false,
cache: false,
success: function (response) {
},
failure: function (msg) {
alert(msg);
},
});
return g_oDB_Ajax_Request;
}

function GetLDAPUsersList(i_sSearchText) {
g_oLDAP_Ajax_Request = $.ajax({
type: "POST",
url: sURL + "/GetLDAPUSERList",
data: " {'i_sPrefix': '" + i_sSearchText + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
crossDomain: false,
jsonp: false,
cache: false,
success: function (response) {
},
failure: function (msg) {
alert(msg);
},
});
return g_oLDAP_Ajax_Request;
}

The above code is working and returning results but the results are getting displayed at the same time (that is after both methods return). But in your code, the first method returns the results and is shown in autocomplete and then after the second method returns the result is concatenated and shown in autocomplete.

Am I missing anything here?

jakecigar