ライブ検索（入力時にフィルタ結果が動的になります） - ブートストラップ、jQuery

Question

私のアプリケーションでは、ライブ検索（入力時に検索結果を動的にフィルタリング）を行いたいと考えています。私は今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); 
}); 

しかし、結果を動的にフィルタリングする方法はわかりません。ソースを指すように

Answer 1

Htmlの一部

変更オートコンプリートダッシュ属性は区切りファイル内のライブラリのように

<div class="input-group input-group-sm" style="width: 500px;"> 
    <input type="search" name="searchTerm" class="form-control pull-right ui-autocomplete-input" placeholder="search" data-ac-autocomplete="accounts.json" autocomplete="off"> 
    <div id="containerAc"> 
     <ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" style="display: none;"></ul> 
    </div> 
</div> 

スクリプトの一部に

$(document).ready(function() { 
    // just in case to have more than one place you want to use it. 
    $("input[data-ac-autocomplete]").each(function() { 
     var control = new searchNs.Autocomplete(); 
     var input = $(this); 
     control.createAutocomplete(input); 
    }); 
}); 

値

var searchNs = searchNs || {}; 

searchNs.Autocomplete = function() { 
    this.targetElement = 'data-target'; 
    this.container = '#containerAc'; 
    this.sourceAttibute = 'data-ac-autocomplete'; 
} 
searchNs.Autocomplete.prototype = function() { 
    var submitAutocompleteForm = function(event, ui) { 
     var input = $(this); 
     input.val(ui.item.label); 

     var form = input.parents('form:first'); 
    }, 
    createAutocomplete = function (input) { 
     var self = this; 

     var options = { 
      minLength:2, 
      // The place to find the values, like your accounts.json 
      source: input.attr(self.sourceAttibute), 
      select: submitAutocompleteForm, 
      appendTo: self.container 
     }; 

     input.autocomplete(options); 
    }; 
    return {createAutocomplete: createAutocomplete } 
}();