What is the best way to allow a user to search through a large list on a web page?

Question

I'm writing an ASP.NET MVC application and I have a form where a user can enter one or more part numbers that they used to fix a problem. Most of the time they know the part number and can just type it in. Occasionally, however, they need some extra help.

The part number table has over 50,000 items in it which is way too big for a dropdown. Also, the select takes some time so I don't know that an autocomplete is all that great here either.

What are some other suggestions on what I can do to make this user friendly?

Answer 1

You could apply a filter on the resultset after keypress. That way, you are not calling the database everytime, and the result set would filter out to what the user has typed in.

Answer 2

I would use Autocomplete box + added server side cache on part numbers (so you won't need take them from Db each time, only when records were updated). This way it should work pretty fast.

Caching in ASP.NET with the SqlCacheDependency Class

With this jQuery peace of code you can filter letters which user inputs into your "Autocomplete" box:

$(function() {
    $.isShiftDown = false;
    $('input#partName').keydown(function(e) {
        if (e.keyCode == 16) $.isShiftDown = true;
        if ($(this).val().length == 0 && (e.keyCode == 188 ||
            e.keyCode == 189)) return false;
        return ($.inArray(e.keyCode, [8, 13, 35, 36, 37, 39, 46, 48, 49, 50,
            51, 52, 53, 54, 55, 56, 57, 188, 189]) > -1 && !$.isShiftDown)
            || (e.keyCode > 64 && e.keyCode < 91);
    }).keyup(function(e) { if (e.keyCode == 16) $.isShiftDown = false; });
});

(replace those numbers with yours, which correspond to allowed characters. For example e.keyCode == 16 is a SHIFT key, 64 - 91 codes are letters from A to Z)

Answer 3

What others have said, with the addition that when dealing with large lists you don't need to start your autocomplete until the filter is at least 2 or 3 characters long.

Answer 4

Some ideas:

• Provide ranges for your part numbers in a dropdown.
• Use categories other than the part number to help narrow the search.
• Use autocomplete with a filter.

Answer 5

What you really need is a pop up that lets the user enter criteria about the part and do the query against the DB. Category, or part name, partial part number, etc. A single combo box field is likely not "rich" enough to let the user express "what they know" about the part so they can narrow down the part number compared to a form with several fields.

Basically, pop a modal picker with user specified filter criteria. Put a little magnifying glass or whatever next to the field to pop it up. Have the form come up blank with no results at first, then the user can narrow stuff down.