LINUX.ORG.RU
Форум — Web-development  

автодополнение на 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 →

Ответ на: комментарий от Lincor

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

Но 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 ★★★★
()
Последнее исправление: Black_Roland (всего исправлений: 1)

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

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

metrokto ★★
()

Во первых, у Вас имя 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
()
Ответ на: комментарий от losos100

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

в реальном коде массив нужно получать посредством AJAX.

Lincor ☆
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
← Источник фин данных.
Web-development
install Yii2 →