CODEWITHSUNDEEP
phpjqueryajaxperformanceautocomplete
user1761160
user1761160

Reputation: 281

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?

Upvotes: 1

Views: 312

Answers (1)

Jakub Hampl
Jakub Hampl

Reputation: 40533

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:

Chrome Developer Tools

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.

Upvotes: 1

Related Questions