jQuery搜索表单返回分区
我正在尝试让它工作：http://jsfiddle.net/D5Pmy/
基本上，当有人输入邮政编码时，例如18052，span类为18052的DIV将返回报告。最初，我希望所有的DIV都保持隐藏状态，直到单击Submit按钮。
我真的很接近了，但是当单击Submit按钮时，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 ></a>
</div>`
回答 3
Stack Overflow用户
发布于 2014-02-26 07:28:56
您好，您有几个问题：
您将textbox和按钮放在一个带有method=post的表单标记中，按钮是一个提交按钮
这意味着表单将在单击按钮后提交-这就是代码执行后发生的事情，它会导致您看到的错误。
要解决此问题，请添加"return 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);
});
});还要注意，$("#integrators-list“)是一个比$("#integrators-list .integrator")更好的选择器，因为它更具体
在$(“#integrators-.each.integrator”)列表中，您应该设置一个对"this“的引用，并使您的span.zip选择器相对于您刚刚选择的父元素
哦，很明显，它只是您想要隐藏或显示的当前元素，因此您可以调用$this.hide()或$this.show()
Stack Overflow用户
发布于 2014-02-26 07:24:17
你在这里隐藏了一切$("#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();
});*未测试
Stack Overflow用户
发布于 2014-02-26 16:47:19
我还派生了你的代码：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“孩子”的方法(与凯文的方法不同)。
https://stackoverflow.com/questions/22026834
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号