0

当有人将单词放入输入框中并在单击时隐藏列表项时，我正在尝试使用基本过滤器，这在 chrome 中工作正常，但在 Firefox 中它根本不起作用。

html:

<form ACTION="#" id="navsform" class="my-search">
<input id="formwidth" type="text" name="query" placeholder="Search...">
<input type="submit" class="my-button" value="Search" onclick="query_searchvar()"></form>

javascript:

function query_searchvar()
{
var searchquery=document.navsform.query.value.toLowerCase();
if(searchquery == '')
{alert("No Text Entered");
}
var queryarray = searchquery.split(/,|\s+/);

event.preventDefault();


$('li').each(function() {
  var searchtags = $(this).attr('data-searchtags');
  //alert(searchtags);
  var searcharray = searchtags.split(',');
//alert(searcharray);
var found = false;
for (var i=0; i<searcharray.length; i++)
    if ($.inArray(searcharray[i], queryarray)>-1) {
        found = true;
        break;
    }

if (found == true )
  {

 $(this).show("normal");
  }
else {
$(this).hide("normal");
}
});
}

非常感谢任何帮助。谢谢你。

嗨，我设法通过您所有的评论和一些 jquery 资源的组合来解决这个问题： HTML：

<form id="myform" action="#" class="my-search">
  <input id="formwidth" type="text" name="query" placeholder="Search..." />
  <input class="my-button"  type="submit" value="Search" />
</form>


$('#myform').submit(function() {
var searchquery = String($('#myform input[name=query]').val()).toLowerCase();
  if (searchquery == '') {
  alert('No Text Entered');
  }
var queryarray = searchquery.split(/,|\s+/);
$('li').each(function() {
  var searchtags = $(this).attr('data-searchtags');
  var searcharray = searchtags.split(',');
var found = false;
for (var i = 0; i < searcharray.length; i++)
    if ($.inArray(searcharray[i], queryarray) > -1) {
        found = true;
        break;
    }

if (found == true) {

 $(this).show('normal');
  }
else {
$(this).hide('normal');
}

});
 return false;
});
4

2 回答 2

1
  1. document.navsform.query.value ???
  2. onclick="query_searchvar()" ???
  3. event.preventDefault ??? -- 缺少跨浏览器
  4. 为什么使用点击而不是提交？
  5. 缺少返回false？

为什么要使用它？

您已经在使用 jQuery，最好 100% 使用 Jquery？

<form ACTION="#" id="navsform" class="my-search">
<input id="formwidth" type="text" name="query" placeholder="Search...">
<input type="submit" class="my-button" value="Search"></form>

Javascript：

$(document).ready(function(){
$("#navsform").submit(function(event){
event = event||window.event; //Cross
var searchquery=String($("#navsform input[name=query]").val()).toLowerCase();
if(searchquery == ''){
alert("No Text Entered");
}
var queryarray = searchquery.split(/,|\s+/);

event.preventDefault();


$('li').each(function(){
var searchtags = $(this).attr('data-searchtags');
//alert(searchtags);
var searcharray = searchtags.split(',');
//alert(searcharray);
var found = false;
for (var i=0; i<searcharray.length; i++){
if ($.inArray(searcharray[i], queryarray)>-1) {
    found = true;
    break;
}
}
if (found == true ){
$(this).show("normal");
} else {
$(this).hide("normal");
}
});
});
return false;//prevents sending the form, remove if necessary.
});
于 2012-07-25T13:25:20.310 回答
1

有几件事，你应该改变：

  1. 将事件对象传递给处理函数。
  2. 将事件处理程序附加到表单提交事件，而不是按钮。这样返回键就可以工作了。
  3. 然后你应该使用像 Firebug、Dragonfly 或类似的工具。它有很大帮助。如评论中所述，您可能已经发现了错误。

有关示例，请参见 Guilherme Nascimento 的答案。（但忽略语气..）

于 2012-07-25T13:26:34.877 回答