jQuery的搜索表單返回股利

我試圖得到這個工作： http://jsfiddle.net/D5Pmy/jQuery的搜索表單返回股利

基本上，當一個郵政編碼有人類型，例如18052，與跨度類18052的DIV將報告。最初，我希望所有的DIV都保持隱藏狀態，直到點擊提交按鈕。

我真的很接近，但點擊提交按鈕後，div顯示然後很快隱藏。我不確定如何保持顯示的信息。

$("#integrators-list div").hide(); 

$("#clickme").click(function(){ 

    // Retrieve the input field text and reset the count to zero 
    var filter = $("#filter").val(), count = 0; 
    if(!filter){ 
     $("#integrators-list div").hide(); 
     return; 
    } 

    var regex = new RegExp(filter, "i"); 
    // Loop through the comment list 
    $("#integrators-list div").each(function(){ 

     // If the list item does not contain the text phrase fade it out 
     if ($("span.zip").text().search(regex) < 0) { 
      $("#integrators-list div").hide(); 

     // Show the list item if the phrase matches and increase the count by 1 
     } else { 
      $("#integrators-list div").show(); 
      count++; 
     } 
    }); 

    // Update the count 
    // var numberItems = count; 
    // $("#filter-count").text("Number of Integrators = "+count); 
});

這裏的HTML：

<form id="live-search" action="" class="styled" method="post"> <fieldset><input type="text" class="text-input" id="filter" value="" /><input type="submit" id="clickme" value="Submit" /></fieldset></form>

<div class="integrator"> 
    <span class="zip">18052</span> 
    <h2>WEPCO Full Service Material Handling Systems Integrator</h2> 
    <h3>www.wepcoinc.com</h3> 
    <p>WEPCO, Inc. has over 40 years of experience with a full range of engineered solutions for high throughput, mission-critical material handling projects.</p> 
    <a href="#">Contact this integrator partner &gt;</a> 
</div>

來源

2014-02-25 Stephanie

嗨，你可以添加/粘貼你的HTML塊（一個與你提到的div） – Allende

可能你在同一時間隱藏/顯示所有的div，因爲你的選擇器'$（「＃integrators- list div「）'但是會看到你的html表單/提交按鈕，幾個div（我有jsfiddle阻止:(）。 – Allende

還有一個'return'語句，我認爲應該是'return false;'in第一個'if' – Allende

這裏你是隱藏的一切$("#integrators-list div").hide();

這裏你展示的一切：你需要一個不同的選擇，也許$("#integrators-list div").show();

：

<html><div class="integrator"> 
<span class="zip">18052</span> 
</div></html> 

if($('.zip').each(function(item, idx){ 
     if(item.html()==filter)item.hide(); 
     });

*沒有測試

來源

2014-02-25 23:24:16 celerno

嗨，你有幾個問題：

你有你的文本框並按鈕裏面的form標籤method = post和你的按鈕是一個提交按鈕

這意味着窗體將是在按鈕被點擊後提交 - 這是你的代碼執行後發生的事情，它導致了你所看到的錯誤。

爲了避開這個添加「返回false」，這將取消表單提交

見：http://jsfiddle.net/VhZD9/1/

$(document).ready(function(){ 
    $("#integrators-list .integrator").hide(); 

    $("#clickme").click(function(){ 

     // Retrieve the input field text and reset the count to zero 
     var filter = $("#filter").val(), count = 0; 
     if(!filter){ 
      $("#integrators-list .integrator").hide(); 
      return false; 
     } 

     var regex = new RegExp(filter, "i"); 
     // Loop through the comment list 
     $("#integrators-list .integrator").each(function(){ 

      var $this = $(this); 
      // If the list item does not contain the text phrase fade it out 
      if ($("span.zip", $this).text().search(regex) < 0) { 
       $this.hide(); 

      // Show the list item if the phrase matches and increase the count by 1 
      } else { 
       $this.show(); 
       //count++; 
      } 
     }); 
     return false; 
     // Update the count 
     // var numberItems = count; 
     // $("#filter-count").text("Number of Integrators = "+count); 
    }); 
});

也注意到，$（「＃集成商列表.integrator」）是一個更好的選擇器比$（「＃integrators-list div」）更具體

and inside $（「＃integrators-list .integrator」）。你應該設置一個對「this」的引用並使你的span.zip選擇器相對於您剛選擇的父元素

哦，顯然這只是你要隱藏當前元素或節目，所以你可以調用$ this.hide（）或$ this.show（）

來源

2014-02-25 23:28:56

我還分叉代碼：http://jsfiddle.net/cv63M/19/

$(document).ready(function(){ 
     $("#integrators-list div").hide(); 

    $("#clickme").click(function(){ 
       $("#integrators-list div").hide(); //hide all again for next search 

     // Retrieve the input field text and reset the count to zero 
     var filter = $("#filter").val(), count = 0; 
     if(!filter){ 
      $("#integrators-list div").hide(); 
      return false; 
     } 

     var regex = new RegExp(filter, "i"); 
     // Loop through the comment list 
     $("#integrators-list div").each(function(){ 
      //alert($(this).children("span.zip").text()); 

      //need to use "this" because is the current div in the loop (each) 
      if ($(this).children("span.zip").text().search(regex) >= 0) { 
        $(this).show();//show div if matches with search 
         count//++; increment counter 
         return false;//finish the loop 
      } 
      // Show the list item if the phrase matches and increase the count by 1 

     }); 

     // Update the count 
     // var numberItems = count; 
     // $("#filter-count").text("Number of Integrators = "+count); 
     return false; 
    }); 
});

似乎工作。但@Kevin Owen已經向你展示了你的腳本的問題。

你的代碼中的主要問題是你沒有使用「this」引用，那麼在你的循環中，你正在使用所有的div，因爲你沒有在div中指定div或span。我使用jQuery的「children」（來自Kevin的diff方法）的方法。

來源

2014-02-26 08:47:18 Allende

jQuery的搜索表單返回股利

回答

相關問題