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 (e.g. a.js).

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.

What database are you using? I do the same type of lookup (called address lookup, I think) based on a table with about 25k records, which basically comes back immediately, even with "sounds like", etc. I do limit it on >3 letters so as to limit the results AND I limit the results to 20 actual displayed, which is further filter as they type. The database should really give you the results back instantly. — Anthony Horne
– Anthony Horne, Commented Apr 24, 2014 at 9:05
I'm just using a script type database, I'll put an example in the q — NDevox
– NDevox, Commented Apr 24, 2014 at 9:06
@Anthony Horne - I do have a specific set of data which is far too large when loaded in terms of list length. What method do you use to limit it? — NDevox
– NDevox, Commented Apr 24, 2014 at 9:52
I use a AutoCompleteExtender:CompletionSetCount (because I use Visual studio), but ultimately these things eventually just generate javascript. Although I have not worked with it much, would LINQ not be an option? There are LINQ to anything connectors everywhere, that may suite your requirement. Then you are using a more standardised approach that can be adjusted later if you need to. Things like top, etc. will then also be applicable. — Anthony Horne
– Anthony Horne, Commented Apr 24, 2014 at 9:58
Don't know any Visual studio! I'll have a look around to see if there are any hacks. — NDevox
– NDevox, Commented Apr 24, 2014 at 10:26

ElmoVanKielmo · Accepted Answer · 2014-04-24 09:06:05Z

3

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");
        }
    });
}

answered Apr 24, 2014 at 9:06

ElmoVanKielmo

11.4k2 gold badges35 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

NDevox Over a year ago

I saw that after I posted thanks for the mention though (changed to keyup instead though, any reason toprefer keydown?)! Not sure it's going to work as it's what I've used previously but will update.

ElmoVanKielmo Over a year ago

Because change event is not fired on every keystroke.

NDevox Over a year ago

Sorry, I meant prefer keydown>keyup

ElmoVanKielmo Over a year ago

Then because user can hold the key longer and thus keyup gets fired later.

NDevox Over a year ago

Alright that got it working and data has loaded faster now than previous reports - might need a bit of testing though!

|

Collectives™ on Stack Overflow

Dynamically loading a database based on user text input

edit: fixes applied:

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

edit: fixes applied:

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related