jQuery如何實現(xiàn)列表檢索功能

發(fā)布時間：2021-07-09 16:19:23 來源：億速云閱讀：253 作者：小新欄目：web開發(fā)

這篇文章主要介紹了jQuery如何實現(xiàn)列表檢索功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

先給大家展示下效果圖：

這是一個簡單的列表右上角有一個檢索功能我們要實現(xiàn)的是列表檢索功能是用的jquery實現(xiàn)的具體代碼如下

$(function(){
      $("input[type=button]").click(function(){
        var txt=$("input[type=text]").val();
        if($.trim(txt)!=""){
          $(".ggsm_list li span").parent().hide().filter(":contains('"+txt+"')").show();
        }else{
          $(".ggsm_list li").show();
        }
      });
    });

給按鈕一個點擊事件，首先獲取到input中的值，然后讓span的其它父元素都隱藏(其實就是隱藏掉其它的li標簽)然后查找含有txt(就是input中值)的那一個li，然后顯示出來

$("#textInput").on("keypress", function (e) {
        if (e.charCode === 13) {
          var txt=$("input[type=text]").val();
          if($.trim(txt)!=""){
            $(".ggsm_list li span").parent().hide().filter(":contains('"+txt+"')").show();
          }else{
            $(".ggsm_list li").show();
          }
        }

這個代碼是對鍵盤回車鍵做的一個優(yōu)化(代碼不多很簡單)

感謝你能夠認真閱讀完這篇文章，希望小編分享的“jQuery如何實現(xiàn)列表檢索功能”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!

向AI問一下細節(jié)

jQuery如何實現(xiàn)列表檢索功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽