ajax, jquery, dropdown box

Not going to happen unless you build your own widget.  Perhaps a input with a hidden table that get displayed when the input gets focus, then when the user clicks on the table cell the innerHTML of the cell will be used to populate the value of the input.

Of course it will confuse the user, and be error prone, but when you re-invent the wheel you often end up with something square instead of round.

Cd&

Common solution to this is to filter your results with ajax/js array, based on what the user types.
For the sake of 50 states you could restrict your filtering based on the first letter only.

But this will depend on whether your user base will actually know what state they want...?

As Cd& has said, creating a 5 column dropdown goes against the grain and in this day and age the solution I mentioned is a much more user friendly way to do it.

how about using auto complete with either ajax or jquery and make the textbox look like dropdown and make it read only. when the end user is mouse over the text box, it will pop up the <div></div>

alex. great, but i can't get it working in my application. where can i download all of the source codes included the jquery like you use? thanks

got it. just wonder. it is <select> and how come it allows me to type....

I know it has script to validate that but how can I prevent anyone to enter something...

remember I want to be just like dropdown ?

and i have my own css. so which part i need to copy from jquery-ui.css?
I don't want fix up with my app.

hmmm.. not working when I try to merge to my application. Currently, I am using jquery 1.4.4.min.js

but after it is selected, the pop up <div></div> is still there. it does not disappear

And I just need one input box not two

http://jsfiddle.net/GaryC123/KZj2V/11/

Needs a little bit of work as it doesn't account for capitalization but hopefully you can see where I am going, tiny amount of code and works quick
(I did a quick test on capitalization but it didn't work correctly so will get back to this tomorrow.)

Test by typing in 'al' or 'Ca', even when you delete what you type the filter is reset.

@ solution1368
The second input would normally be hidden, I have it as a normal text input so you can see the value being set when you change the option.  In the final code you won't see it.

Edited
I screwed up the lost focus.

I mate, sorry for loosing track but I think we're on different latitudes :)

Anyway, jQuery 1.4.4? Any special reason?
That's pretty old and if I'm not mistaken was on version 1.6 that there was a good re-write of the jQuery code with some good performance and feature improvements.
So if it's in your power to do it I strongly advise you to upgrade to the latest 1.x.x

If @GaryC123's solution works for you, go for it! :)

@GaryC123: if you don't use anything else you can actually only include the autocomplete code.

@GaryC123: To solve the capitalization issue in a simple way just make sure all names in the li are lower-case. Capitalize them through CSS and to the comparison always in lower-case. I took the liberty to change you sample a bit: http://jsfiddle.net/KZj2V/12/

http://jsfiddle.net/GaryC123/KZj2V/18/

@GaryC123: you're in geek mode! :)

Just be careful using that as it overrides it everywhere...

>@GaryC123: you're in geek mode! :)

He is way beyond geek mode...

Forgot to capture focusout. and made it look a bit nicer.

http://jsfiddle.net/GaryC123/V9DeA/1/

@solution1368
Do you just need the state name or the short code or both?

just need to capture state Abbr.

So use this example
http://jsfiddle.net/GaryC123/V9DeA/3/

And in your receiving page you can get the value with
$_POST['state-code']
or
$_GET['state-code']

...depending your FORM's post method.

thank gary.
actually, the goal is to use <select></select> Is it possible to replace from <input text>
to <select>?

<div id="container">
    <input type=text id="state-select">
    <ul id="states">
        <li data-id="AL">Alabama</li>
        <li data-id="AK">Alaska</li>
        <li data-id="CL">California</li>
        <li data-id="NY">New York</li>
        <li data-id="WY">Wyoming</li>
        <li data-id="KN">Kansas</li>
    </ul>
        <input type="text" id="state-code">
</div>

Why, you are wanting to do something that a select can not do so there is no point using a select.
What is wrong with a textbox, if you want you can add a small image that makes it look like a select box.

okay. then I need your helps for the following one if the textbox is kept.

https://www.experts-exchange.com/questions/28258707/asp-net-jquery-and-web-services-for-2nd-drop-down.html

and the 2nd one <select> </select> as well. actually, I am ok with text box but I just don't know how to make both text box talking to each other in jquery codes.

I don't know what you mean both text box talk to each other - what text boxes?
Where is your code for the ajax code?

Should probably close this question out and continue with the new one as we are now delving into another area

please close this question

I've requested that this question be deleted for the following reason:

Please close this question. The solution provided by the experts do not qualify by the admin in experts-exchange.

Thanks

I agree. so now I gave 3 experts same points.

In the past, it was experts-exchange.com admin staff reopen the question.

Thanks