Advice on autocomplete performance

I need to improve the performance for my autocomplete script. What I need is when I click on input box elementID it will populate a list of selection from search.php return by json_encode. The following script is working. But everytime when I click on the input box, it takes a while before it generates the list.

("#elementID")
.autocomplete({
  source: function(request, response) {
    $.ajax({
      url: "search.php",
      dataType: "json",
      success: function(data){
        response(data[0]);                                  
      }
    });
  },
  minLength: 0,
  delay: 0,
  select: function(event, ui){
    $(this).val(ui.item.value);
  },
  change: function( event, ui ) { //remove if not click from drop down
    if (!ui.item) {
      $(this).val("");
    }
   }                            
})      
.click(function() {  //Click to activate
  $( "#elementID" ).autocomplete("search", " ");
});     

In search.php

   $ocidb ->strTable     = "table";
   $ocidb ->strField     = "column1";
   $ocidb ->strCondition = "coulmn1 is not null";
   $result                = $ocidb->ORASelectRecord();
   echo json_encode(filter_unique_array($result, 'coulmn1'));
   return;

Like to find out if I am doing things correctly or there is another proper way to do it?

Answers


First of all you should check where is the source of slowness. In the Chrome Developer tools go to the Network tab and see how long it takes to load your autocomplete list:

This will tell you if the problem is on the server side or on the client side. If the time or latency together are larger then 300ms, chances are that the wait for the server is quite noticeable. You might want to then benchmark your serverside code and see where the bottleneck is. From your code, you might want to enforce uniqueness in the database rather then in the PHP code.

If the server responds promptly then the problem likely lies in your JavaScript. Try to look for a different autocomplete library or try to make it cache DOM elements instead of recreating them every time.

In general some sort of caching and possibly prefetching (load the initial set of results before the user requests them) should help in typical scenarios.


Need Your Help

How to add a variable to URL of $.ajax({ url : “ ”});

javascript jquery ajax url input

I want the user to be able to change a part of the URL address to their post code. I have a text box and button which I am hoping will submit the value to the URL.

List attributes by a common criteria attribute

xml loops xquery

I have a question dealing with Xquery.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.