AutoComplete alternatives with jQuery

There are alternate ways to implement autocomplete dropdown/textbox component in your Website. One option is to implement Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes

For this, you need to bind the dropdownlist in a similar way; it is done and configured when choosing a plugin over the dropdownlist control. Here is a sample auto complete dropdownlist, using chosen plugin. It also allows you to give selected items on Postbacks on the code at the back-end.

The code behind to bind dropdownlist.

And the result:

 

However, this would not be a pure auto complete dropdownlist, since we are actually binding all dropdown values at once and the items are not coming on demand.

Another alternative is to implement Bootstrap autocomplete, which is also called "typeahead". This one can be an actual autocomplete, which fetches the data from WebMethod/API based on what the user has requested by typing in TextBox. To implement, you will  need to reference Bootstrap related CSS, scripts and write WebMethod to fetch the data upon the user request as they type. Here is a sample code on a similar scenario. Notice that once you select any element, you will be able to get the ID of the selected item in an HiddenField in an updater function:

The code behind to bind dropdownlist.

And the result:

Reference link: Bootstrap AutoComplete

Another alternative is to use jQuery UI autocomplete: Autocomplete | jQuery UI

Here is a sample code on fetching the data, which is based on the user type.

Here is WebMethod to bind the data, when the user types any character:

And the result: