使用Jquery UI過濾頁面內容

Question

嘗試根據jQuery UI自動完成搜索過濾掉頁面上的內容。 當用戶鍵入與搜索無關的內容時，將切換為顯示：無； 因此，僅顯示與搜索相關的內容。

的HTML

        <div class="items" data-id="Get Milk">Get Milk on the way home</div>
        <div class="items" data-id="Drop by Phil's">Drop by Phils house</div>
        <div class="items" data-id="Grab a Sandwich">Grab a sandwich</div>

<input id="auto" type="text" />

Java腳本

$(function () {
    var source = $(".items").map(function () {
        return $(this).data("id");
    }).get();

    $("#auto").autocomplete({
        source: source        
    });
});​

嘗試

$(document).ready(function () {

    var search = $("#auto").html();
    var results = $(".items").html();

    if (search == results) {
        $(".items").css("display", "block");
    } 
    else {
        $(".items").css("display", "none");
    }

});

現在，我知道我需要引用各個“項目”，並且這也需要揭開神秘面紗。 jsfiddle： http : //jsfiddle.net/J5rVP/25/由bit.ly/U1gjr2提供

Answer 1

好的，首先要了解您正在使用jQueryUI Widget。 它們很棒且可擴展，但是您必須深入研究文檔以確保您了解它們的工作原理。

初始化自動完成功能時，您將需要提供一個響應功能，您可以在其中進行匹配檢查並根據需要隱藏。 像這樣：

$("#auto").autocomplete({
    source: source,
    response: function(event, ui){
        if(ui.content.length == 0)
            alert("nothing");
        else
           alert(ui.content.length + " items");
    }
});

最后，請仔細閱讀自動完成文檔。 您將在那里學習有關jQuery UI API的大量知識。

http://api.jqueryui.com/autocomplete/