私のアプリケーションでは、ライブ検索(入力時に検索結果を動的にフィルタリング)を行いたいと考えています。私は今jQueryに苦労しています。ライブ検索(入力時にフィルタ結果が動的になります) - ブートストラップ、jQuery
コード:existingAccountsのためのデータを取得するために使用さ
<div id="appFormSubType">
<label class="g-label control-label">Select application form sub-type:</label>
<select class="form-control">
<option value="notSelected">Not Selected</option>
<option value="first">First</option>
<option value="second">Second</option>
<option value="third">Third</option>
<option value="fourth">Fourth</option>
</select>
<label class="some-label control-label">New or existing?</label>
<input class="form-control" placeholder="Search" type="search" id="accountSearch">
<select multiple class="form-control" id="existingAccounts">
<option value="newAccount">New Account</option>
</select>
</div>
が機能:
$.getJSON("/accounts.json", function(data){
$.each(data.items, function(i, item){
$('#existingAccounts').append($('<option>').text(item.name).attr('value', item.id));
})
});
だから私は、keyUpイベントに検索クエリを生成することを考えていました。
$('#accountSearch').on('keyup', function(){
var searchTerm = $(this).val().toLowerCase();
console.log("Search Form - Keyup: " + searchTerm);
});
しかし、結果を動的にフィルタリングする方法はわかりません。ソースを指すように
あなたは見たことがありますかJquery-UI autoComplete https://jqueryui.com/autocomplete/#default –