使用JQuery UI過濾頁面內容

嘗試基於jQuery UI自動完成搜索過濾頁面上的內容。當用戶正在輸入與搜索無關的內容時，將切換爲顯示：無; 因此只顯示與搜索相關的內容。使用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" />

的Javascript

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

來源

2012-12-21 user1900791

OK，首要的事情是要明白，你是在處理一個jQueryUI的小部件。它們非常好，可擴展，但您必須在文檔中進行深入研究，以確保您瞭解其工作原理。

當您初始化自動完成時，您會希望提供一個響應函數，您可以在其中檢查匹配項並在需要時隱藏。就像這樣：

$("#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/

來源

2012-12-21 02:32:11

感謝您的意見。但是，我該如何改變檢測到的項目的CSS，以便所有其他項目的顯示：無;「而x拾取物品的數量'display：block''？ – user1900791

使用JQuery UI過濾頁面內容

回答

相關問題