Geek Answers Handbook

Speeding up jQuery AutoComplete (Inevitably Long Lists)

I started my journey to speed up jQuery autocomplete earlier this afternoon, and decided it would be nice to start all memcaching . As suggested in this article: Accelerate AutoFill .

However, I am still dealing with slow response times even after installing and using Memcached.

The problem in my case is that I am dealing with unusually long lists, in my case, over 6,700 individual members. (All genera or genera of all plants)

The bottleneck seems to create a table and populate the list on the client side, and this is not caused by retrieving information from Memcached .

If someone else ran into this particular problem, I would love to hear about a smart way to solve it. I will post my code below.

Note. This particular page is not accessible to the general public, and I know that there are several gaping holes in security.

require_once 'oo/Database.php';

$mysqldb = new Database;

$memcache = new Memcache;
$memcache->connect('localhost', 11211) or die ("Could not connect to memcache");

$sql = "SELECT DISTINCT `Genus` FROM importlist.plants";

$key = md5('query'.$sql);

$result = $memcache->get($key);


//check if we got something back
if($result == null) {

    //fetch from database
    $result = $mysqldb->rawSelect($sql)->getResult();

    //set to memcache, expires after 1 hour
    $memcache->set($key,$result,0,3600); 
}

//Result array
$Genera = ($memcache->get($key));

//Add required "quotation marks" for autocomplete
foreach ($Genera as &$Genus){
    $Genus = '"'.$Genus[Genus].'"';
} 
$Genera = implode($Genera,',');

//PHP to generate jQuery    
echo <<< EOT

    <script>
    $(function() {
        var availableTags = [$Genera];
        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });
    </script>
EOT;

?>

<input id="tags" />
+5
source share
2 answers
$(document).ready(function() {

    // once page loads, make AJAX request to get your autocomplete list and apply to HTML
    $.ajax({ url: '/path-to-get-tags-as-json.php',
        type: "GET",
        contentType: "application/json",
        success: function(tags) {
            $( "#tags" ).autocomplete({
                source: tags
            });
        }
    });
});

Put the URL in your PHP file when creating the autocomplete list in the above AJAX url placeholder parameter. In your PHP code, change the list generation so that it returns a JSON array of the following values:

[ "first" , "second" , "anotherEntry" , "in" , "the" , "array" ]

, , . , , , . .

, , , .

, , , .

+5

, 1 , 26 . , . .

, . , , 30-40 . , , , . 26 * 26 . , .

, . , , 500 . , .

+1

More articles:


All Articles