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

Question

[iDrugov]

Ёмкость заголовка зашкаливает, так что к сути. 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/

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

Answer 1

[iDrugov]

Написал свой, на jQ, а то все предлагают с ajax и прочей чёрной магией.

Как выяснилось в процессе работы - datalist не поддерживается Safari, в том числе на iPhone и IE на WindowPhone. Потому кроссбразуерное решение пришлось искать там, от чего уходил. Очень грустная поддержка HTML5.

https://jsfiddle.net/8f53otky/26/

Answer 2

[vista1x]

У вас два элемента #b, список вставляется не туда

Comments

[iDrugov]

DataList ID="someId" - какой тогда тут должен быть id? используя иной id, тоже никакого результата

[vista1x]

iDrugov: https://jsfiddle.net/8f53otky/7/

[iDrugov]

vista1x: и? Прокрутка не появилась