Turning all combo boxes into searchable input fields

2

3

Websites and webapps: Is there a method/addon/software which would allow me to turn any or selective combo boxes (i.e. drop down lists), on any website, into a searchable input field.

Background: Many older admin interfaces have really long drop down lists and there is no way to search in them, and if the elements are not sorted or poorly sorted then good luck finding anything.

Alex

Posted 2014-09-02T07:08:50.720

Reputation: 973

Question was closed 2014-09-03T13:04:25.563

As discussed in the below comments, the Greasemonkey solution is the way and it will never(!) (wink wink to Dave and random) become outdated until browser-level and/or OS-level software will make all combo (aka select, aka drop down) inputs as searchable as de facto standard -- which is completely doable and I can bet on it that it will eventually happen (just like the passwords inputs are nowdays getting special handling at OS and browser levels). – Alex – 2014-10-02T05:10:51.927

Answers

1

It depends on the situation, but generally, the answer is even if you could it possibly won't be worth while.

You can though, (at least on a desktop PC), type when most combo box is expaneded/selected to find a value... If you visit the DHL site you will see a drop down list. Click the list to see the options and whilst it's open type United K (including the space) and you'll see it will jump to the item.

Some drop down lists won't allow it, such as this site... The most likely technology used would be JavaScript so may be a GreaseMonkey script could help to turn off the behaviour so it acts it's standard HTML way.

Things like Greasemonkey will allow you to affect the rendered HTML and possibly convert it from a combox box to a search box, but, the thing about a combo box is it's predictable! We know what options we have and therefore, what can be selected. We don't typically code against unexpected value errors since there isn't likely to be any! This may mean by typing in words which don't exist could result in unexpected behaviour.

With web apps, it's potentially more complicated as other technologies can be used...

And of course, each browser may react differently too, so in conclusion it's not really possible to answer, but my answer is no, you can't do what you want without error (or at least, working exactly how you want) for every webpage!

Dave

Posted 2014-09-02T07:08:50.720

Reputation: 24 199

Note that your second example is not a select at all. It's a custom hacky control that breaks all kinds of usability guidelines. If that coder/designer worked for me, he'd be taken to the woodshed. – Brock Adams – 2014-09-02T08:19:44.687

Yes.. that's the point I've made. The second example shows that some websites overwrite the default behaviour and so "won't allow it". I agree, it's a terrible design decision @BrockAdams. – Dave – 2014-09-02T08:49:13.807

1I understand your point, but I think the OP rather wants to have a text input + list, so the input acts as a filter. Coding a userscript providing such a functionality is definitely possible. – ComFreek – 2014-09-02T17:46:12.560

@ComFreek, but my second paragraph suggests this (or am I still missing the point)? – Dave – 2014-09-03T07:24:58.317

1

Nice discussion guys. Actually this http://jqueryui.com/autocomplete/#combobox matches exactly with what I'm after (click Combobox on the right, if its not selected for you). You can see that: a. it will not let you select non-existing element, b. it will do partial match (can be in the middle of the element, c. it uses underlying combobox (toggle it with "show underlying select"). Now, I just have to find a greesemonkey script or write it myself.

– Alex – 2014-09-03T08:29:08.520

@Alex, please note, that if you use JQuery to do this, and the website your visit has a different version of JQuery then lots of things can easily go wrong! – Dave – 2014-09-03T08:31:30.290

Yes, I agree, and it matches with the last paragraph of your answer. I will try to find a vanilla JS solution, in the worse case write it myself (something I was trying to avoid, hence asking here if somebody knows of a tool that does this) – Alex – 2014-09-03T08:33:08.510

By the way, a solution does not have to be universal and should be activated with a shortcut or even only for selected combo boxes rather than for everything on a page/view. – Alex – 2014-09-03T08:35:09.257

1Since, you're running Greasemonkey proper, you can use jQuery-UI with no problem, except for possible CSS collisions (minor annoyance). Just use @require and make sure you're not in @grant none mode and it works fine. ... I did a quick search for scripts like this. Didn't find anything worthwhile. I'll write one myself if somebody doesn't beat me to it. – Brock Adams – 2014-09-03T08:58:12.653

/Dave You mentioned that 'unexpected behavior' due to arbitrary input could occur. I would limit the selection to the original select options. But forgive me my nitpicking. /Alex and/or @BrockAdams: Do you plan to publish it here? I'd also be interested in using such a userscript. – ComFreek – 2014-09-03T11:37:58.847

@ComFreek in fact the jqueryui (link above) does limit the selection to the original (source) options. In terms of publishing it - if the question is unblocked. – Alex – 2014-09-08T00:21:51.507

Wrote a script but don't know if it should be shared here or as a new post in stackoverflow – Alex – 2014-09-08T05:06:40.503

@Alex, post it here as it can be useful. Or, delete this post and re-post it at http://webapps.stackexchange.com/ (where it will be on topic). Remember, you can answer your own question on the SO sites :)

– Dave – 2014-09-08T07:13:28.333

@Alex http://softwarerecs.stackexchange.com would be a better fit than Webapps.SE.

– ComFreek – 2014-09-08T08:48:49.863