auto complete multiple columns

Either using ajax, jquery for the auto complete function for the text 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 / c#. Thanks,
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.

sivagnanam chandrakanthTechnical LeadCommented:
The div on which you are showing the ajax suggestions, wrap the text after certain lines for example 5 lines..

In other words,

Your Div should be styled to show the suggestions in multiple columns like this

Suggestion1     Suggestion4       Suggestion7
Suggestion2     Suggestion5       Suggestion8
Suggestion3     Suggestion6       Suggestion9
Alexandre SimõesManager / Technology SpecialistCommented:
Have a look at this example I built for you to see if it's what you need:

Basically I took a sample code from jQueryUI AutoComplete and just added a small CSS change:
.ui-menu-item {
    width: 33% !important;
    float: left;

Open in new window

Just run the example and let me know.

Julian HansenCommented:
Just a comment on the last post - you might want to prefix the css change with a class or ID to keep the change local to the text box.

There might not be a side effect in this case but if you do have other situations where you don't want a multicolumn output then the above change will need to be localised to the text box in question.
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

solution1368Author Commented:
Great but I don't want to see comma after it is selected. Is it possible?
And if the data actually come from SQL db. How to do it in c#?

Alexandre SimõesManager / Technology SpecialistCommented:
Ah... the comma issue is because I picked the multi-selection example from jQueryUI site.
See the updated sample code here:

Now, to get the data from the server.
For that you need to do an AJAX call to the server and get a JSON response.

You can see their example here:

The supported data source options are here:

Here's a sample code on how to implement the whole thing using

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
solution1368Author Commented:
alex: very helpful. I am glad to have your helps.
solution1368Author Commented:
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

From novice to tech pro — start learning today.