如何使用Ajax中的搜索框突出顯示列表中的數據

我有一個搜索框和一個由我的項目中的數據庫中的數據填充的div列表。這個想法是，當我在搜索框上鍵入內容時，兼容結果將在div列表中突出顯示/選中。可以在codeigniter中使用ajax或jquery嗎？感謝，並有一個愉快的一天！如何使用Ajax中的搜索框突出顯示列表中的數據

來源

2014-06-20 jjydummya

請給我們一頁jsfiddle。如果我們知道頁面結構的方式，我們可以幫助您。 –

@NicolasHenrard嗨。抱歉。這是我的http://jsfiddle.net/vEACM/ – jjydummya

這是你想要的。

的jsfiddle：http://jsfiddle.net/vEACM/1/

HTML：添加search-field類的輸入SEACH場。

CSS： 添加此規則，以你的CSS表：.highlight{background-color:yellow;}

的JavaScript

$(function() { 
    $('.search-field').on('keyup blur change', function() { 
     var text_s = $(this).val(); 

     //Clean all by remowing eventual highlight classes already added 
     $("li").removeClass("highlight"); 

     //Only react when a text is in the field 
     if (text_s.length > 0){ 
      $("li").each(function(){ 
       var li_value = $(this).text(); 
       if (li_value.indexOf(text_s) >= 0){ 
        //If the li_value contains the text, add a class to highlight 
        //the li element 
        $(this).addClass("highlight"); 
       } 
      }); 
     } 
    }); 
});

/\不要忘了加載一個jQuery版本（版本1.8.3使用！在jsFiddle中）

注意：如果您想突出顯示元素，即使在如果不允許，只需在代碼中檢索text_s和li_value的值時使用.toLowerCase（）。例如：var text_s = $(this).val().toLowerCase();

來源

2014-06-20 07:25:38

哇。謝謝。爲什麼當我輸入整個單詞時沒有突出顯示？我還有其他問題，我的填充列表包含許多數據。確切的說是300。它可以自動滾動到指定的數據嗎？ – jjydummya

如果您輸入「Apple」，代碼將突出顯示該元素。您必須根據需要使用錨點。檢查此鏈接在您的文檔中導航：http://stackoverflow.com/questions/8579643/simple-jquery-scroll-to-anchor-up-or-down-the-page –

當我鍵入字母'A'，兩單詞突出顯示（Aratilis和香蕉）。但是當我在搜索框上鍵入'Apple'時，沒有任何內容突出顯示。 – jjydummya

如果您在使用搜索框尋找建議列表，請嘗試this jQuery Plugin。查詢this問題，瞭解如何使用AJAX實現jQuery Autocomplete。

來源

2014-06-20 06:19:24 Mani

是的。我已經嘗試jQuery自動完成，但它與我的ajax列表衝突。自動完成處於活動狀態時，ajax列表不起作用。 – jjydummya

如何使用Ajax中的搜索框突出顯示列表中的數據

回答

相關問題