How to autocomplete in ASPX only the original page request?
We are developing an ASPX (.NET 2.0) page that includes a select list with too many items (200+).
We need some form of autocomplete to make this something that behaves like a textbox, but with autocomplete suggestions.
We would like to use JQuery. So far, our search has only included autocomplete, which requires some sort of background support, additional requests (in AJAX), etc. We would prefer to deliver all the data at once with the page request. Ideally, this would be like selecting items from a list.
Are there autocomplete blocks that convert the selected list? or is there a way to hook autocomplete to data already on the page (in ASPX with .NET 2.0) so that it doesn't have to access external resources?
Edit: Postbacks was not the phrase I was looking for. I mean the one supplied with the original page request.
Edit 2: The page should degrade gracefully. Many of the solutions out there "inject" content, so without javascript you don't get any content. It could be over 200 options, but at least they would exist there. This is why transforming the picklist is our ideal.
source to share
Use the jQuery autocomplete plugin as Steve Willcock suggested. Execute a regular select-box, then in your script replace it with a textbox and initialize the plugin with the array you create if the items are options. So your data comes in like 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 convert it like this:
$(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 select
.
source to share
http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions
The jquery autcomplete plugin can accept data as an array. If you create an array in your .js include file that should fit your requirement.
Let's take a demo page as an example - check the Multiple Cities (Local) section and local data. js which is used there.
source to share
The answers here were very helpful, but we found this plugin after further searching, which automatically works directly in the picklist:
Sexy Combo: http://code.google.com/p/sexy-combo/
Demo page: http://phone.witamean.net/sexy-combo/examples/index.html
This requires a little less work.
I wanted to document this for the reference of others. Thanks everyone for the help.
source to share