Необходимо чтобы при клике на элемент массива в выпадающем окне этот элемент помещался в поле input и выпадающее окно сворачивалось?

Question

[Владимир Казаков]

HTML код:

<input type='search' id='search' placeholder="Текст" autocomplete='off'>
                <div id='result'></div>

Код выполняется при вводе в input буквы к примеру "a" выпадает окно и список . Вопрос в том, как сделать, чтобы при клике на любой из элементов в выпавшем списке , элемент помещался в поле input , а всплывающее окно исчезало?
JS код:

var arr = ['a','add','audio','remove','adds','classlist','lol','sap','sanek','left','width']
document.getElementById('search').onkeyup = function() {
    document.getElementById('result').innerHTML ='';
        var s_1 = this.value.length;
        if(s_1>0){
            for(var i=0; i<arr.length; i++) {
                var s_2 = arr[i].split('').slice(0,s_1).join('');
                if(s_2==this.value) {
                    document.getElementById('result').innerHTML+='<div class="list">'+arr[i]+'</div>';
                }
            }
        }
    };

Comments

[Петр Мухуров]

Может, стоит заменить весь этот код обычным селектом?

[Дмитрий Баскаков]

Возможно, поможет свойство value у input'a

[FeST1VaL]

Так а в чем собственно проблема то у вас?

[Владимир Казаков]

Артем Будин, список который выпадает , в нем элементы не кликабельны . А нужно чтобы на них можно было нажимать чтобы в инпут забивался. Как любой поисковик.

Answer 1

[FKV]

Пример на jquery. Надо это вставить в вашу функцию.

$('.result .list').on('click', function(){
          var data = ($(this).text());
          $('#search').val(data);
        });

Comments

[Владимир Казаков]

Отличное решение, благодарю!

$('#result .list').on('click', function(){
var data = ($(this).text());
$('#search').val(data);
});
$(document).mouseup(function (e) {
var container = $(".list");
if (container.has(e.target).length === 0){
container.hide();
}
});