автодополнение на Javascript

0

2

надо реализовать автодополнение в текстовом поле. сделал так:

<input id="input" type="text" list="list" onfocus="autocomplete()" oninput="autocomplete()"/><br/>
<datalist id="list"></datalist>
<script>
	function autocomplete() {
		var array = [ "Aab", "Aba", "Rsrs", "Aaa", "Bbbbb", "Bbbab" ];
		var options = '';
		array.sort().forEach(function(elem) {
			if (elem.lastIndexOf(document.getElementById("input").value, 0) === 0) {
				options += "<option value=\"" + elem + "\"/>"
			}
		});
		document.getElementById("list").innerHTML = options;
	}
</script>

но вот проблема: дерганое обновление. раньше было добавление сразу в datalist через appendChild(), но было еще дерганнее.
как можно решить?

Ссылка

←	Источник фин данных.

install Yii2

→

https://github.com/twitter/typeahead.js не?

Vit ★★★★★
(22.01.15 21:37:33 MSK)

Ответ на: комментарий от Vit 22.01.15 21:37:33 MSK

хотелось бы без библиотек.

Lincor ☆
(22.01.15 22:30:53 MSK) автор топика

Ответ на: комментарий от Lincor 22.01.15 22:30:53 MSK

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

можно вообще без js

Black_Roland ★★★★
(23.01.15 01:53:53 MSK)
Последнее исправление: Black_Roland 23.01.15 01:54:49 MSK (всего исправлений: 1)

Ответ на: комментарий от Black_Roland 23.01.15 01:53:53 MSK

это же просто выпадающий список, там автодополнения нет. и у меня оно используется.

Lincor ☆
(23.01.15 10:18:40 MSK) автор топика

Ответ на: комментарий от Lincor 23.01.15 10:18:40 MSK

Не посмотрел код внимательно. Сори.

Но datalist не просто список же, там и фильтр есть: http://storage2.static.itmages.com/i/15/0123/h_1421998585_9149471_14aa1d00bd.png http://storage1.static.itmages.com/i/15/0123/h_1421998726_3597425_7a30a2ade7.png

Или я чего-то не понимаю?

Black_Roland ★★★★
(23.01.15 10:41:37 MSK)
Последнее исправление: Black_Roland 23.01.15 10:41:58 MSK (всего исправлений: 1)

Ссылка

Если через datalist — то ничего не поделать, все зависит от браузера. К примеру, в Опере (12, естественно) не дергается.

Можно навелосипедить свой datalist, но целесообразней забить.

metrokto ★★
(24.01.15 16:02:08 MSK)

Ссылка

Во первых, у Вас имя autocomplete конфликтует с каким-то нативным говном (проверял в FF)

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

В третих, реализовать такую банальщину можно было бы безо всяких свистоперделок


<input /><br/>
<div ></div>
<script>
array=[ "Aab", "Aba", "Rsrs", "Aaa", "Bbbbb", "Bbbab" ].sort()
list=document.querySelector("div")
document.querySelector("input").oninput=function() {
    if(!this.value) return list.innerHTML=""
    var re=new RegExp("^"+this.value)
    list.innerHTML=array
     .filter(function(el){return re.test(el)})
     .join("<br>")
}
</script>

~~losos100~~
(24.01.15 17:32:04 MSK)