Autocomplete on select tag

[DanyUP]

It would be nice to have the same idea applied to select tags.
Items could be read from the option tags inside the select, then you could use the "autocomplete select box" in two ways: you can get autocomplete while typing and display the full list clicking on a button.

[rougin]

👍

[LeaVerou]

I love this idea.

[DanyUP]

I tried to realize a plugin to implement this functionality.

I needed to modify the evaluate function of Awesomplete so that you can pass a string (ignoring minChars) and force to open the full list. I don't know if there is another way of doing this.
https://gist.github.com/DanyUP/5b6c92bbff0292540de4#file-awesomplete-select-js

Applying it in awsomplete homepage seems good:

Suggestions for improvement? :)

[emilien-d]

👍 , what about the optgroup tag support?

[DanyUP]

optgroup support would be nice! But I think that would need more deep modification on awesomplete base code... I'll think about it!

Should I put the code in a separate file (like a plugin) or it's better to put it as an example js code (like in issue #1202)?

[LeaVerou]

Interesting. Is there a demo somewhere?

[DanyUP]

I setup another advanced examples section with select box autocomplete in http://danyup.github.io/awesomplete/#advanced-examples

I didn't think about passing html attributes such as "data-minchars" and "data-maxitems" from select box to awesomplete input box... I should work on it...

[DanyUP]

Oops! The button doesn't get displayed well in Firefox... My bad...
Back to work!

[DanyUP]

Ok, I fixed few things:

• The button seems displayed correctly in Chrome, Firefox, IE>=9 and Safari
• I added a separate css file to setup some rule for the select button (it's ok to use a separate css?)
• You can now pass html attributes (ex: "data-minchars") directly to select box

The working demo is still at http://danyup.github.io/awesomplete/#advanced-examples

[LeaVerou]

This is very cool, but an example should also show code for achieving that example (including CSS) :-)
Regarding the website, it's ok to use a separate CSS for the examples (all of them).
I think the select arrow would be much better as a discreet arrow on the right of the input (inside it), in the same color as the text, with no borders etc. Right now it’s too much "in your face" and that’s not really needed.

[DanyUP]

Thanks for your feedback, Lea!
I changed the style of the select arrow and I put on the page all the code needed to run my example.
I'm afraid it's quite "heavy" compared to other examples... I can try to improve it and make it smaller in the next days.

[LeaVerou]

Ouch, yes, this is A LOT of code for this. Also it doesn’t seem to quite work, i.e. clicking the arrow again doesn’t close the popup.
I think this perhaps should wait a bit. Once I implement a feature in the core to allow different values and different labels for them, this will be come super easy (and won't need to update a select behind the scenes).

[stevelacey]

Any progress here? Awesomplete is way faster than a bunch of the other options I've tried for searching select boxes with lots of options, also the highlighting is great :| would love to continue using.