jquery autocomplete - slow reponse using remote datasource

Question

I'm using remote datasource which is a database query. Max results from the query is 1000. I'm using the "term" parameter to filter my results, but the response is slow. It's actually not too bad on 2 characters, but the if you type one letter it's almost 3 seconds to return. I switch from YUI to jquery. I had this working much faster with YUI using the same datasource. The response was instant on 1 character. Is there a better way to do this? Code below.

$(function() {

    $("#xContact").autocomplete({
        minLength: 1,
        source: "<$strLower(HttpWebRoot)$>data/employee_lookup.php",
        focus: function( event, ui ) {
            $( "#xContact" ).val( ui.item.label );
            return false;
        },
        select: function( event, ui ) {
            $( "#xContact" ).val( ui.item.label );
            return false;
        }
    })
    .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.label + "<br><span style='font-size:0.8em'>" + item.desc + "</span></a>" )
            .appendTo( ul );
    };
});

It looks like you're appending each item individually, forcing 1000 rerenders. Could you try generating a string, appending it once, and report back? — Mike Robinson
– Mike Robinson, Commented May 7, 2012 at 20:04
It seems that the _renderItem function appends an alement to the DOM tree for each results, resulting in 1000 DOM manipulations for the resultset, and this is causing the slow response. — Maxim Krizhanovsky
– Maxim Krizhanovsky, Commented May 7, 2012 at 20:05
@bygrace, almost 3 seconds to render the suggestion list below the textbox. — ironarm
– ironarm, Commented May 7, 2012 at 20:26
well, took it down to 500 max results. Don't really need 1000. It's slightly quicker... still about 2 seconds. Need a solution to make this quicker. How could I put the results into a string? — ironarm
– ironarm, Commented May 7, 2012 at 22:35

ironarm · Accepted Answer · 2012-05-09 01:24:31Z

I believe this is an issue with the library handling remote data sources

My reasoning: I have the exact same code using a local datasource, with MORE data, and it renders instantly on 1 char. I know it's not my remote datasource either. If I browse directly to the server side page that does the query, it renders the results instantly. One of the suggestions was that it's slow because it's manipulating the DOM for each result. Well, it does the same thing for the local source. So, i'm not buying that explanation. The only difference is the source. So, there's got to be lag handling remote data sources. Someone suggested putting the remote datasource result into a string and then use that as the source. I shouldn't have to do that. If that works it would prove jquery doesn't handle remote datasources the same. Assuming my remote datasource is not causing the lag (which it's not), there should be no difference between local and remote. It's ultimately an array of data. So the issue must be the handling and/or rendering of remote datasources

I was using YUI with the same remote datasource and it was rendering the list instantly on 1 char. So, this proves it's not the datasource also. I switched to jquery because I find it better overall. I limited my query to 250 records. It's not instant, but it's rendering in about 1 sec.

Collectives™ on Stack Overflow

jquery autocomplete - slow reponse using remote datasource

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related