使用jQuery按鈕單擊後搜索並顯示特定內容

我正在嘗試使用jQuery構建搜索過濾器。當用戶在文本框中鍵入文本時，我可以搜索單詞並顯示特定內容。使用jQuery按鈕單擊後搜索並顯示特定內容

但是我想在搜索按鈕被點擊後開始搜索。

(function($) { 
 
    jQuery.expr[':'].Contains = function(a, i, m) { 
 
    return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
 
    }; 
 

 
    function listFilter(header, list) { 
 
    $(list).find('p').hide(); 
 
    var form = $("<form>").attr({ 
 
     "class": "filterform", 
 
     "action": "#" 
 
     }), 
 
     input = $("<input>").attr({ 
 
     "class": "filterinput", 
 
     "type": "text" 
 
     }), 
 
     search = $("<input>").attr({ 
 
     "class": "filterbutton", 
 
     "type": "button", 
 
     "name": "btn1", 
 
     "value": "Search" 
 
     }); 
 

 
    $(form).append(input).appendTo(header); 
 

 
    $(input).on('input', function() { 
 
     var filter = $(this).val(); 
 

 
     $(list).find('p').hide(); 
 

 
     if (filter) { 
 
     $(list).find("p:Contains(" + filter + ")").show(); 
 
     } 
 
    }); 
 
    } 
 

 
    $(document).ready(function() { 
 
    listFilter($("#header"), $("#list")); 
 
    }); 
 
}(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<h1 id="header">Collection</h1> 
 
<div id="list"> 
 

 
    <div id='p1'> 
 
    <p>First Paragraph</p> 
 
    <p>Abbot and Costello - Africa Screams</p> 
 
    </div> 
 

 
    <div id='p2'> 
 
    <p>Second Paragraph</p> 
 
    <p>Abbot and Costello - Frank/Meet</p> 
 
    </div> 
 

 
    <div id='p3'> 
 
    <p>Third Paragraph</p> 
 
    <p>addin</p> 
 
    </div> 
 

 
    <div id='p4'> 
 
    <p>Forth Paragraph</p> 
 
    <p>Begins</p> 
 
    </div> 
 

 
</div>

碼我怎樣才能做到這一點？

在此先感謝。

$(input).on('input', function() {

觸發按鈕的點擊使用：

$(search).on('click', function() {

然後改變這：

var filter = $(this).val()

來源

2017-06-20 Snappy

。在你的例子中，沒有按鈕？！？ –

不，我試圖建立，但它不工作。你可以在代碼中看到名稱搜索。 – Snappy

您需要追加搜索按鈕並在點擊事件時調用過濾器。

$("<input>").attr({"class":"filterbutton","type":"button","name":"btn1","value":"Search"}); 

    $(form).append(input).appendTo(header); 
    $(form).append(search).appendTo(header); 

    $(search).on('click', function() { 
     var filter = $(input).val(); 

     $(list).find('p').hide(); 

     if(filter) { 
     $(list).find("p:Contains("+filter+")").show(); 
     } 
    }); 
    } 

    $(document).ready(function() { 
    listFilter($("#header"), $("#list")); 
    }); 
}(jQuery));

來源

2017-06-20 11:03:23 Kenath

而不是使用在<input type="text />的輸入事件觸發對此：

var filter = $(input).val()

這樣用戶輸入的文本將被正確讀取。

來源

2017-06-20 11:02:59

不知道我是否理解這個問題，但會將$(input).on('input'更改爲$(search´).on('click讓你更接近？而不是得到$(this).val();您將不得不使用$(input).val();以從

獲得正確的值搜索

來源

2017-06-20 11:03:06 rypskar

解決您的問題普萊舍檢查這個代碼，它可以幫助你更好的重新編碼您的jsfiddle代碼，根據您的問題

<title>Some Title</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <body> 
    <h1 id="header">Collection</h1> 

    <div id="list"> 

    <div id='p1'> 
    <p>First Paragraph</p> 
    <p>Abbot and Costello - Africa Screams</p> 
    </div> 

    <div id='p2'> 
    <p>Second Paragraph</p> 
    <p>Abbot and Costello - Frank/Meet</p> 
    </div> 

    <div id='p3'> 
    <p>Third Paragraph</p> 
    <p>addin</p> 
    </div> 

    <div id='p4'> 
    <p>Forth Paragraph</p> 
    <p>Begins</p> 
    </div> 

    </div> 
    </body> 
<script type="text/javascript"> 
    (function ($) { 
     jQuery.expr[':'].Contains = function(a,i,m){ 
     return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0; 
     }; 

     function listFilter(header, list) { 
     $(list).find('p').hide(); 
     var form = $("<form>").attr({"class":"filterform","action":"#"}), 
      input = $("<input>").attr({"class":"filterinput","type":"text"}), 
      search = $("<input>").attr({"class":"filterbutton","type":"button","name":"btn1","value":"Search"}); 

     $(form).append(search).appendTo(header); 
    $(search).on('click', function() { 
      var filter = $(input).val(); 

      $(list).find('p').hide(); 

      if(filter) { 
      $(list).find("p:Contains("+filter+")").show(); 
      } 
     }); 
     } 

     $(document).ready(function() { 
     listFilter($("#header"), $("#list")); 
     }); 
    }(jQuery)); 
</script>

來源

2017-06-20 11:05:18

我想你錯過了現有腳本附加按鈕的位置;它不需要HTML中新增的＃show元素。 –

謝謝@MattSach - 我已根據您的查詢再次編輯代碼 –

解決，追加按鈕，聽點擊！

(function($) { 
 
    jQuery.expr[':'].Contains = function(a, i, m) { 
 
    return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
 
    }; 
 

 
    function listFilter(header, list) { 
 
    $(list).find('p').hide(); 
 
    var form = $("<form>").attr({ 
 
     "class": "filterform", 
 
     "action": "#" 
 
     }), 
 
     input = $("<input>").attr({ 
 
     "class": "filterinput", 
 
     "type": "text" 
 
     }), 
 
     search = $("<input>").attr({ 
 
     "class": "filterbutton", 
 
     "type": "button", 
 
     "name": "btn1", 
 
     "value": "Search" 
 
     }); 
 

 
    $(form).append(input).append(search).appendTo(header); 
 

 
    $(document).on('click', '.filterbutton', function() { 
 
     var filter = $('.filterinput').val(); 
 

 
     $(list).find('p').hide(); 
 

 
     if (filter) { 
 
     $(list).find("p:Contains(" + filter + ")").show(); 
 
     } 
 
    }); 
 
    } 
 

 
    $(document).ready(function() { 
 
    listFilter($("#header"), $("#list")); 
 
    }); 
 
}(jQuery));

<title>Some Title</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <h1 id="header">Collection</h1> 
 
    <div id="list"> 
 

 
    <div id='p1'> 
 
     <p>First Paragraph</p> 
 
     <p>Abbot and Costello - Africa Screams</p> 
 
    </div> 
 

 
    <div id='p2'> 
 
     <p>Second Paragraph</p> 
 
     <p>Abbot and Costello - Frank/Meet</p> 
 
    </div> 
 

 
    <div id='p3'> 
 
     <p>Third Paragraph</p> 
 
     <p>addin</p> 
 
    </div> 
 

 
    <div id='p4'> 
 
     <p>Forth Paragraph</p> 
 
     <p>Begins</p> 
 
    </div> 
 

 
    </div> 
 
</body>

來源

2017-06-20 11:07:07

使用jQuery按鈕單擊後搜索並顯示特定內容

回答

相關問題