solution1368
asked on
ajax, jquery, dropdown box
Either using ajax, jquery for the dropdown box. Instead of shown e.g. 50 US states in one long columns.
How can it be coded with like 5 columns so the drop down list will be shortened.
I have asp.net / c#. Thanks,
How can it be coded with like 5 columns so the drop down list will be shortened.
I have asp.net / c#. Thanks,
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.
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.
ASKER
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
ASKER
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 ?
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 ?
ASKER
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.
I don't want fix up with my app.
ASKER
hmmm.. not working when I try to merge to my application. Currently, I am using jquery 1.4.4.min.js
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
but after it is selected, the pop up <div></div> is still there. it does not disappear
ASKER
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.
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/
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/
@GaryC123: you're in geek mode! :)
Just be careful using that as it overrides it everywhere...
Just be careful using that as it overrides it everywhere...
>@GaryC123: you're in geek mode! :)
He is way beyond geek mode...
He is way beyond geek mode...
@solution1368
Do you just need the state name or the short code or both?
Do you just need the state name or the short code or both?
ASKER
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.
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.
ASKER
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</l i>
<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>
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</l
<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.
What is wrong with a textbox, if you want you can add a small image that makes it look like a select box.
ASKER
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
https://www.experts-exchange.com/questions/28258707/asp-net-jquery-and-web-services-for-2nd-drop-down.html
ASKER
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?
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
ASKER
please close this question
ASKER
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
Please close this question. The solution provided by the experts do not qualify by the admin in experts-exchange.
Thanks
ASKER
I agree. so now I gave 3 experts same points.
In the past, it was experts-exchange.com admin staff reopen the question.
In the past, it was experts-exchange.com admin staff reopen the question.
Thanks
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&