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,
solution1368Asked:
Who is Participating?
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.

COBOLdinosaurCommented:
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&
0
GaryCommented:
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.
0
solution1368Author Commented:
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>
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
There is jquery autocomplete http://jqueryui.com/autocomplete/ or http://twitter.github.io/typeahead.js/ that can help with that. However, can you give us the real world issue you want to resolve.  What may work for countries/states/cities may be completely different for beer/style/brand/label or dog/group/breed or dog/size/breed.

Let's say you wanted to use State and City with 2 dropdowsn.  In the past, I have used a jquery project called chained.  It is very easy to set up. http://www.appelsiini.net/projects/chained

However, I agree with Cd& and GaryC123 as to keeping this easy.  What I am doing now in this situation is using autocomplete.   I have done this using FirstName,Lastname, Phone and Email look u all in one text field.  You end up with something complex on the backend but can be simple for the users.  For State and City for instance, you would use ajax to hit a page that does the look up.  

To keep it simple, you could have a query that joins the two character state code with the city name with two fields, state and city like:
CA Los Angeles
AZ Phoenix

Your sql could look something like this in vbscript,

' assume the ajax is sending from a field called 'data'

d = request("data") ' this is our raw data
d=replace(d,"'","") ' a quick clean by removing single quote

state = left(d,2) 'get the first 2 characters only
if len(state)=1 then
    state=state&"%"   ' if state is one character, add a wild card
end if
city = trim(mid(d,3,len(d)) ' start at the third character and get the rest, trim left and right spaces

"Select state+' '+city where state like '"& state & "' city like '"& city &"%'"

Open in new window


This can get more complex to watch for the city first etc. but this is a good start.
0

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
Alexandre SimõesManager / Technology SpecialistCommented:
Hi mate!

The problem with the multiple columns is solved here:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_28254244.html#a39541490

So I guess you want it to behave like a dropdown also?
Here's a working example: http://jsfiddle.net/7kaX9/

Background:
This sample is based on jQueryUI sample that can be found here: http://jqueryui.com/autocomplete/#combobox
On top of that I only added the same css class from my previous answer:
.ui-menu-item {
    width: 33% !important;
    float: left;
}

Open in new window


Hope is what you're looking for.
Cheers!
0
solution1368Author Commented:
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
0
solution1368Author Commented:
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 ?
0
solution1368Author Commented:
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.
0
solution1368Author Commented:
hmmm.. not working when I try to merge to my application. Currently, I am using jquery 1.4.4.min.js
0
GaryCommented:
This can be done so simply with a few lines of jquery and no need to download the huge framework that is jQuery UI
http://jsfiddle.net/GaryC123/KZj2V/1/

HTML
<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>

Open in new window

CSS
#container {
    position:relative
}
ul {
display:none;
    width:250px;
    position:absolute;
    left:0;
        top:30px
}
ul li {
    width:80px;
    display:inline-block
}

Open in new window

jQuery
$("#state-select").click(function(){
  $("#states").show()  
})
$("#states li").click(function(){
  $("#state-code").val($(this).data("id") )
})

Open in new window


I don't have time now to add in the autocomplete but it is very simple
0
solution1368Author Commented:
but after it is selected, the pop up <div></div> is still there. it does not disappear
0
solution1368Author Commented:
And I just need one input box not two
0
GaryCommented:
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.
0
Alexandre SimõesManager / Technology SpecialistCommented:
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/
0
Alexandre SimõesManager / Technology SpecialistCommented:
@GaryC123: you're in geek mode! :)

Just be careful using that as it overrides it everywhere...
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
>@GaryC123: you're in geek mode! :)

He is way beyond geek mode...
0
GaryCommented:
Forgot to capture focusout. and made it look a bit nicer.

http://jsfiddle.net/GaryC123/V9DeA/1/
0
GaryCommented:
@solution1368
Do you just need the state name or the short code or both?
0
solution1368Author Commented:
just need to capture state Abbr.
0
GaryCommented:
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.
0
solution1368Author Commented:
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>
0
GaryCommented:
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.
0
solution1368Author Commented:
okay. then I need your helps for the following one if the textbox is kept.

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_28258707.html
0
solution1368Author Commented:
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.
0
GaryCommented:
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?
0
GaryCommented:
Should probably close this question out and continue with the new one as we are now delving into another area
0
solution1368Author Commented:
please close this question
0
solution1368Author Commented:
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
0
solution1368Author Commented:
I agree. so now I gave 3 experts same points.

In the past, it was experts-exchange.com admin staff reopen the question.
0
GaryCommented:
Thanks
0
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
HTML

From novice to tech pro — start learning today.