實時搜索（鍵入時動態過濾結果）- 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 }
}();