Autocomplete Dropdown with Linkbuttons - or "AJAX gone wild"

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

You'll have to handle the OnSelectedIndexChanged event of your drop down list to rebind your dataset based on the users selection. If you want the filtering to happen in an asynch postback, wrap the dataset (or datagrid I'm assuming) and your drop down in an UpdatePanel. That is one way to do it anyhow.

Answer 2

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.

Answer 3

Hi,

In my opinion, you shouldn't use AJAX for this at all.

here's why:

(1) On focus: ALL the options that he can select are shown in the dropdown. This means that all possible options are already sent to the client.

(2) If the user types something in, the number of entries in the drop down are filtered down to match. This can easily be done on the client side. Being ajax'y and going back to the server at this point will just slow things down.

phpguru.org has a control which is 'almost exactly' what you need:

http://www.phpguru.org/static/AutoComplete.html#demo

It differs slightly from what you need in that it shows the dropdown on double-click instead of on focus. That should be fairly easy to modify.

I hope this helps.

Answer 4

I am not entirely sure what you want, but the Ra-Ajax AutoCompleter definitely have support for having "controls" within itself. You can see that in the search box at Stacked in fact (upper right corner) where we're using links. But this could also be LinkButtons if you wish...

Disclaimer; I work with Ra-Ajax...