Question

Ok, so I want an autocomplete dropdown with linkbuttons as selections. So, the user puts the cursor in the ‘text box’ and is greated with a list of options. They can either start typing to narrow down the list, or select one of the options on the list. As soon as they click (or press enter) the dataset this is linked to will be filtered by the selection.

Ok, is this as easy as wrapping an AJAX autocomplete around a dropdown? No? (Please?)

Answer 1

This widget can be made with three items: a text input, button input, and an unordered list to hold the results.

 __________  _ |__________||v|__             <-- text and button   |              |            <-- ul (styled to appear relative to text input)   |              |   |              |   |______________| 

ul shown on:

• ‘keyUp’ event of the text input (if value is non-empty)
• ‘click’ event of the button input (if currently not visible)

ul hidden on:

• ‘click’ event of the button input (if currently visible)
• ‘click’ event of list items

When the ul is shown or the ‘keyUp’ event of the text input is triggered an AJAX call to the server needs to be made to update the list.

On success the results should be placed in the ul. When creating the list items they should have a ‘click’ event attached to them that sets the text input value and hides the ul (may have to add a link inside the li to attach the event to).

The hardest part is really the CSS. The JavaScript is simple especially with a solid library like prototype that supports multiple browsers.

You will probably want to support some IDs for the items, so you can add some hidden inputs to each list item with the id and next to the text input to store the selected items ID.