Provide users with a search feature filtering a dropdownlist

Question

Hi

I'm developing an ASP.NET form for data-entry. Users have to select a client from a dropdownlist that is filled with about 1000 clients.

Now the client list is growing and the users have requested that I add a lookup feature: they'd like to type part of the name and filter the dropdownlist with clients whose name match. So if they type 'aaa' they'd like to see only clients with 'aaa' somewhere in their name.

I have looked at the ajax control toolkit's AutoComplete but that works on textboxes, not dropdownlists.

Can anyone suggest a nice solution?

Answer 1

Use it on a textbox then! Surely the person looking in the dropdown list knows the name of the client. There is little difference, in my opinion, in this scenario.

I have been using a jQuery tag suggest add in on my MVC app which works very well.

http://remysharp.com/2007/12/28/jquery-tag-suggestion/

If you are interested just comment and i will give you the code i am using.

If you really want to use a dropdown list you could have a textbox and dropdown list in an update panel. When the users enters the text (and clicks a button) you could then populate the dropdown using results filtered to what the users types.

Answer 2

I think a textbox would actually be preferred for this. A select box doesn't invite typing - so it becomes a bit of a hidden trick to filter it (not to mention that Firefox will pretty much do it right anyway).

You can easily throw an image next to a textbox to indicate that it has options, which allows both mouse driven or keyboard driven interaction.

I'm partial to JQuery, so I'd use JQuery's autocomplete - which has config options to require a match, or that clicking the box will drop down all items.

If you're interested in "progressive enhancement", you may be best off with both a traditional select input (for accessibility) that gets replaced by an autocomplete textbox driven off the same data. Something like:

<select id="s">
   <option value="foo">Foo</value>
   <option value="bar">Bar</value>
</select>

var d = $('#s OPTION').map(function() {
   return $(this).text();
});

$('#s').hide().append('<input type="text" />')
   .autocomplete(d, {
        mustMatch: true,
        minChars: 0,
        autoFill: true,
        matchContains: false
    })
    .result(function(e, d, f) {
       // Select option for the form to submit
       $('#s').val(d);
    });

You could also leave the select visible - which makes it more flexible, but potentially more confusing - and hook an event handler to the select box to update the textbox as well so that they stay in sync.