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.

  • 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 Oct 2 '14 at 5:10

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!

  • 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 Sep 2 '14 at 8:19
  • 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 Sep 2 '14 at 8:49
  • 1
    I 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 Sep 2 '14 at 17:46
  • 1
    Nice discussion guys. Actually this 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 Sep 3 '14 at 8:29
  • 1
    Since, 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 Sep 3 '14 at 8:58

Not the answer you're looking for? Browse other questions tagged or ask your own question.