How to autocomplete in ASPX with original page request only?

Question

We are developing an ASPX (.NET 2.0) page that includes a select list with far too many elements in it (200+).

We need some form of autocomplete to make this into something that behaves like a text box, but with autocompelte suggestions.

We would like to use JQuery. So far our searching has only turned up autocompletes that require some kind of back end service, additional requests (in AJAX) etc.. We would prefer to deliver all the data at once with the page request. Ideally it would be as select list entries.

Are there autocomplete boxes that convert a select list? or is there a way to wire an autocomplete to data already on the page (in ASPX with .NET 2.0) such that it will not have to access external resources?

Edit: Postbacks was not the phrasing I was looking for. I mean delivered with the original page request.

Edit 2: The page should degrade gracefully. Many of the solutions out there 'inject' the content, so without javascript you don't get any content. It may be 200+ choices, but at least they would exist there. That is why the conversion of a select list is our ideal.

Answer 1

Use the jQuery autocomplete plugin as suggested by Steve Willcock. Output a regular select-box, then in your script replace it with a textbox and initialize the plugin with an array that you build out if the option-elements. So your data comes in as a select:

<select size="1" id="options" name="options">
  <option>Option #1</option>
  <option>Option #2</option>
  <option>Option #3</option>
  <option>Option #4</option>
  <option>Option #5</option>
  <option>Option #6</option>
  <option>Option #7</option>
</select>

...and you transform it like so:

$(function(){
  // execute once the DOM is ready...

  // build array of option texts
  var options = [];
  $("#options option").each(function(){
    options.push($(this).text());
  });

  // build an input field, replace the select with it,
  // and wire up autocomplete.
  $("<input id='options' name='options' type='text'>")
    .replaceAll("#options")
    .autocomplete(options, {autoFill: true});  
});

...no JS? No problem - you still have your select.

Answer 2

http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

The jquery autcomplete plugin can take data as an array. If you build the array in a .js include file that should suit your requirements.

For an example, take a look at the demo page - check the "Multiple Cities (local)" section, and the localdata.js file that is used there.

Answer 3

There are a number of third party controls (we use one from ComponentArt's WebUI toolkit) that will give you the auto-complete combobox functionality.

You can also achieve the same idea using AJAX techniques so that you avoid a full postback.

Answer 4

The answers here were very helpful, but we found this plugin after further searching that works automatically directly on the select list:

Sexy Combo: http://code.google.com/p/sexy-combo/

Demo page: http://phone.witamean.net/sexy-combo/examples/index.html

This will require a bit less work.

I wanted to document this for the reference of others. Thank you all for the help.