Огонь нажмите событие Li до сокрытия ул

Question

У меня есть текстовое поле, а затем неупорядоченный список, как показано ниже:

<div> 
    <input type="text" /> 
    <button>Go</button> 
</div> 
<ul> 
    <li>A</li> 
    <li>B</li> 
    <li>C</li> 
</ul> 

Теперь в размытости случае текстового поля:

$('input').on('blur', function() { 
    $('ul').hide(); 
}); 

Приведенный выше код работает только хорошо.

Я пытаюсь сделать что-то вроде combobox.

Итак, мое желаемое поведение:

Когда Textbox теряет фокус, предложения должны скрывать (что показано выше)

Когда Нажал на предложение, его щелчок событие должно стрелять, а затем текст этого предложения должны быть заполнены в текстовом поле, а затем все предложения должны скрывать

Таким образом, для второй функциональности, когда я нажимаю на любой li в click случае li должны стрелять, а затем ul должны быть скрыты.

Answer 1

var items = ["Apple", "Banana", "Celery", "Peach", "Plum"]; 
 

 
$('input').on('input', function() { 
 
    var text = $(this).val(); 
 
    $('ul').show().empty().append(items.filter(function(item) { 
 
    return item.match(new RegExp(text, 'i')); 
 
    }).map(function(text) { 
 
    return $('<li>').text(text); 
 
    })); 
 
}); 
 

 
$('input').on('blur', function() { 
 
    $('ul').fadeOut(); 
 
}); 
 

 
$('ul').on('click', 'li', function() { 
 
    $('input[type=text]').val($(this).text()); 
 
    $('ul').hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="text" /> 
 
    <button>Go</button> 
 
</div> 
 
<ul> 
 
</ul>

Answer 2

Просто обновите текстовое поле, а затем спрячьте ul в одном и том же событии клика li.

$("li").on("click", function() { 
    $("input[type=text]").val(this.text()); 
    $("ul").hide(); 
}); 

Извините, если jQuery не идеален - я не часто его использую. Это все равно поможет.