Выпадающий список с автозаполнением, скроллом и вводом своих значений

[Melodyn]

Ёмкость заголовка зашкаливает, так что к сути. Datalist даёт прекрасный и лёгкий в понимании список с автозаполнением и возможностью записи своего значения, я уже сделал его сюда: https://jsfiddle.net/8f53otky/3/

Есть проблема лишь с отсутствием скролла, а значений в моём списке может быть сколь угодно много.

Я пытался настроить виджет combobox из jquery ui - там тоже нет скролла и он не поддерживает ввод значений не из списка. 

Здесь отмечен решением такой код:

<div style="overflow-x: hidden; overflow: scroll; width: 100%; height:500px"> 
       <asp:DataList ID="someId" runat="server">
             .... normal datalist implementation here ....
       </asp:DataList>
</div>

Но как он работает, если работает - я не понял. Запустив его у себя, скролл появился, а список пропал: https://jsfiddle.net/8f53otky/4/

 

В общем, рыбятки, либо я жёстко туплю, либо ещё чего, но мне кажется, что решение, как истина - где-то рядом.

[Melodyn]

Вопреки своему ожиданию - на айфонах и винфонах datalist вообще не работает. В силу отсутствия подсказок, я крайне удручён и пока сделал вот такой замечательный выпадающий список: https://jsfiddle.net/8f53otky/12/

 

Как быть с автодополнением - я пока не придумал.

 

UPD придумал, сделал на jQuiery

Взял keyup и при каждом событии получаю значение input. Вместо option использую div и записываю значение из массива в id и дублирую его просто текст <div id=значение1>значение1</div>. Далее - проверяю, есть ли div, содержащий знак из input в id  и просто вывожу их в html().

 

Работает простенько, чистенько, красивенько, на всех платформах https://jsfiddle.net/8f53otky/26/

Edited January 24, 2017 by Melodyn

[Switch74]

ищите кастом или сделайте сами.

Когда-то приходилось сделать универсальный с большим количеством всяких разных возможностей, но и скрипт получался не маленький. Встроенными возможностями браузеров кроссбраузерного варианта на все случае жизни я не видел.