火クリックイベントUL

Question

を隠す前に、私は、テキストボックスと以下のような順序なしリストを持っています良い。

私はcomboboxのようなものを作ろうとしています。

だから、私の希望動作は次のとおりです。テキストボックスがフォーカスを失ったとき

、提案は

（上記示されている）非表示にする提案をクリックすると、そのクリックイベントが発生しなければならないし、その提案のテキストが満たされる必要がありますテキストボックスにして、すべての提案を非表示にする必要があります火、その後ulなければならない、私はどのliにliのclickイベントをクリックすると、第二の機能のために、そう

を非表示にします。

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

テキストボックスを更新し、liの同じクリックイベント内でulを非表示にするだけです。

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

申し訳ありません申し訳ありませんが、jQueryは完璧ではない - 私はそれを頻繁に使用しません。とにかくこれは助けになるはずです。