Question

In my web app , i am using jquery ui autocomplete which data are stored in the database (Mysql).

In this application, i have the administration official data And i enable the users to enter their own data. Data will be displayed in the autocomplete drop down list .
The administration data are limited and never change thus are preloaded and cached in memory, however the user data aren’t (since user data grows exponentially and there is no point of using a database if all is to be cached in memory).

So i am doing multi levels caching in my web app, of which, i am caching autocomplete’s user data on the client side (instead of getting them from db on each search).

The scenario is as follow:
When the app loads, the admin data (that are preloaded in memory) are loaded and cached in a JS object to be used in the autocomplete mechanism.

Thus when a user searches for a word, it will check the admin data JS object and if it can’t find it, it will go to db and find it in user data.

So for the case of searching user’s data in db, What i am doing right now is the following:

$( "#search" ).autocomplete({
source:function(request, response) {
var results = $.ui.autocomplete.filter(data, request.term);
if (request.term.toUpperCase() in autocomplete_cache) {
    response($.map(autocomplete_cache[request.term.toUpperCase()], function(item) {
     return {value: item.members.name, md5: item.members.ID}
    }))
   
    return;
   }

where autocomplete_cache is a javascript object:

var autocomplete_cache = {};
// ...it gets filled everytime a new $.post gets new data
...autocomplete_cache[request.term.toUpperCase()] = data;

For the moment, it is caching the exact term searched by a user.

For example, if a user writes "ABCD" and which is not already cached :

–> go to the database (MySQL) do :"WHERE term Like %ABCD%"
–> autocomplete_cache["ABCD"] = "data parsed from mysql"

So if the same USER now retypes "ABCD" it will get it from the autocomplete_cache Object.
However if the USER type "ABC" it won’t get it from the cache object because of the line:

if (request.term.toUpperCase() in autocomplete_cache)

So what i would like to do is to match what the User types in the cache, so in this scenario if the User types "ABC" (which is contained in cache’s "ABCD" String) , the autocomplete will build a drop down list containing "ABCD".

Is there a way of doing that? the reason for this requirement instead of finding the exact String index in the cache object , it will find a wider range and thus limit probabilities of needing to go to db to find the new matches.

Answer 1

Instead of looking for a specific key, test each key whether the term is a substring:

var term = request.term.toUpperCase();
for (var key in autocomplete_cache) {
    if (key.indexOf(term) > -1) {
        // term is contained in key
    }
}

And instead of calling response on the first match, collect all matches’ items in an additional array and call response at the end:

var term = request.term.toUpperCase(),
    items = [];
for (var key in autocomplete_cache) {
    if (key.indexOf(term) > -1) {
        items.merge($.map(autocomplete_cache[key], function(item) {
            return {value: item.members.name, md5: item.members.ID}
        });
    }
}
if (items.length > 0) response(items);

You might also want to remove any duplicates in items and sort the resulting items before calling response:

var term = request.term.toUpperCase(),
    items = [],
    index = {};
for (var key in autocomplete_cache) {
    if (key.indexOf(term) > -1) {
        $.each(autocomplete_cache[key], function(item) {
            var id = item.members.ID;
            if (!index[id]) {
                items.push({value: item.members.name, md5: item.members.ID});
                index[id] = true;
            }
        });
    }
}
items.sort(function(a, b) { return a.name.localeCompare(b.name); });
if (items.length > 0) response(items);