實時搜索（輸入時動態過濾結果） - Bootstrap，jQuery

Question

我希望能夠在我的應用程序中進行實時搜索（鍵入時動態過濾搜索結果）。我現在正在努力與jQuery。

代碼：

<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> 

功能用於獲取數據existingAccounts：

$.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 } 
}();