Implement multi column combo box using HTML + JavaScript

Question

I am looking a multi columns combo box by using HTML + JavaScript only. Is there any example or library available? As I came across some solution, they are in ASP.NET, but not pure HTML + JavaScript.

Here is an example but it is implemented using Java Swing.

alt text

Something like http://developer.yahoo.com/yui/datatable/ but that shows only the top row unless focused? — Mike Samuel, Nov 19 '10 at 01:51
yui datatable could be used inside the combo popup, but it's not a good enough answer to what he's asking. — Ruan Mendes, Nov 19 '10 at 01:53

score 5 · Accepted Answer · answered Nov 19 '10 at 01:52

5

If jQuery is an option, here's a plugin that looks like it can deliver this:

Jquery Multi Column Selectbox

answered Nov 19 '10 at 01:52

Surreal Dreams

26,055
3
46
61

DarkWingDuck · Answer 2 · 2010-11-19T02:28:08.360

3

Flexbox is probably the best one I have ever used with jQuery, with paging and JSON support :

http://flexbox.codeplex.com/

It's a real combo box, as it displays the results by typing. It can be easily restyled through the CSS.

Eg. to modify the rows :

.ffb .content .row {
    border-bottom: 1px solid #828790;
    clear: both;
    color: #000000;
    height: 20px;
}

border-bottom may be removed to get rid of lines between rows.

edited Nov 19 '10 at 02:28

answered Nov 19 '10 at 01:57

DarkWingDuck

2,028
1
22
30

I don't the horizontal separator for each row. You know how to make them invisible? – Cheok Yan Cheng Nov 19 '10 at 02:19
Is it possible to make Flexbox search on all columns not just the {name} column? – AverageMarcus Sep 28 '11 at 11:14
the site at http://flexbox.codeplex.com/ does not exist anymore – Fre Timmerman Mar 22 '23 at 15:22

score 2 · Answer 3 · answered Nov 19 '10 at 02:00

http://dev.sencha.com/deploy/dev/examples/form/combos.html Shows ExtJS's combo box. Their combo box can be customized with template to be used for rendering each entry. All you'd need to do is to specify a template that contains a few spans with a set width.

If you're willing to use ExtJS (not free), write it in here, and I'll show you an example

Implement multi column combo box using HTML + JavaScript

3 Answers3

Linked