Searchable Drop-Down (via AJAX)

I have a regular <select> box with 300+ results.  This particular form requires the user to select a value from this select box.  I'm looking for a way to make it easier for the users to locate a particular item... by incorporating AJAX.  I've found many topics on being able to type within a normal text box and then display related items in a small drop-down beneath the text box (similar to the way Google Suggest works), however, I'm looking for a way to incorporate that into a drop-down.

Basically, the drop-down would allow the user to select an item from the drop-down OR begin typing within the dropdown.  While they type within the drop-down the items in the drop-down narrow down.

Can this be done? How?
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
you want to implement a kind of suggestion?
The way it is typically done, a regular input box is used along with a dynamically created list that is not done using a select.

The reason for this is because of the funny way select lists are rendered in most browsers....

Essentially, select lists are only select lists. You cannot type a value into them.
You can pretend that you are doing that by putting a text input box over top of a select list, and connecting the two by way of javascript, but the result is unpredictable...

Worse, if you dynamically make items in a select list invisible, those items will not return when set to be visible again. ( at least in firefox )

It could be done using a select list, by using the dom to actually completely remove items from the select list and then re-add them when you want them back.

Once again, it is not typically done since select lists aren't designed to be used that way. It is much cleaner to use some carefully done floating divs that look like a dropdown list.

I will post some code another time,
josh2780Author Commented:
Thank you all for your comments.  All 3 of you have nudged me in the direction I think I have to go.  I began to realize just before dhelkowsi's comment that it would most likely have to be done by using a regular text box and perhaps make it look like a drop down box, similar to

I'm now guessing that I have to do something like the above link and have all the items displayed in the "drop-down".  Then, if a user begins to type, change the results in the drop-down.  One thing I don't like about the example is that when you click the drop-down, all the text beneath it shifts down as well... it's not truely floating.
Forced accept.

EE Admin
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.