Dynamically loading a database based on user text input

Question

I have an autocomplete widget which needs to return options from a database of objects.

On doing so, once the user selects an item the widget will populate other hidden textfields with values from the particular object they chose. - All of this works and has been used on previous projects

However this particular database is far too big (44k+ objects, filesize is several mb and has taken far too long to load in practice) so we've tried various ways of splitting it up. So far the best has been by first letter of the object label.

As a result I'm trying to create a function which tracks the users input into a textfield and returns the first letter. This is then used to AJAX a file of that name (egajs).

That said I've never had much luck trying to track user input at this level and normally find that it takes a couple keystrokes for everything to get working when I'm trying to get it done on the first keystroke. Does anyone have any advice on a better way of going about this objective? Or why the process doesn't work straight away?

Here is my current non-working code to track the user input - it's used on page load:

function startupp(){
    console.log("starting");
    $("#_Q0_Q0_Q0").on("keyup", function(){
        console.log("further starting!");
        if($("#_Q0_Q0_Q0").val().length == 1){
            console.log("more starting");
            countryChange(($("#_Q0_Q0_Q0").val()[0]).toUpperCase());
        }
        else{
            console.log("over or under");
        }
    });
}

And an example of the data (dummy values):

tags=[
    {
    label:"label",
    code:"1",
    refnum:"555555",
    la:"888",
    DCSF:"4444",
    type:"Not applicable",
    status:"Open",
    UR:"1",
    gRegion:"North West"
    },
    ....
];

---

edit: fixes applied:

• Changed startupp from .change(function) to .on("keyup", function) - keydown could also be used, this is personal preference for me.

• Changed the autocomplete settings to have minLength: 4, - as the data starts loading from the first letter this gives it the few extra split ms to load the data before offering options and also cuts down how much data needs to be shown (helps for a couple of specific instances).

• Changed how the source is gathered by changing the autocomplete setting to the following:

  source: function(request, response) { var results = $.ui.autocomplete.filter(tags, request.term); response(results.slice(0, 20)); },

where tags is the array with the data.

all seems to be working now.

Answer 1

You should bind to keydown event:

function startupp(){
    console.log("starting");
    $("#_Q0_Q0_Q0").keydown(function(){
        console.log("further starting!");
        if($(this).length() == 1){
            console.log("more starting");
            countryChange(($(this).val()[0]).toUpperCase());
        }
        else{
            console.log("over or under");
        }
    });
}