Question

当有人将一个单词放入输入框并且单击时隐藏列表项时，我正在尝试使用基本过滤器，这在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;
});

Answer 1

document.navsform.query.value ???
onclick =“query_searchvar（）”???
event.preventDefault ??? - 缺乏crossbrowser
为什么使用点击而不是提交？
缺少返回false？

为什么要用它？

你已经在使用jQuery了，用Jquery 100％工作会更好吗？

<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.
});

Answer 2

有一些事情，你应该改变：

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

参见Guilherme Nascimento的答案。（但忽略了语气..）

输入框在Firefox中不起作用

2 个答案: