Question

I am trying to have a basic filter when someone puts a word into a input box and list items hide on click, this is working fine in chrome but in firefox it is not working at all.

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

Any help much appreciated. Thank you.

Hi, I managed to get this working with a combo of all your comments and some jquery resources:
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

1. document.navsform.query.value ???
2. onclick=”query_searchvar()” ???
3. event.preventDefault ??? — lack crossbrowser
4. Why Use click rather than submit?
5. missing return false?

why use it?

You’re already using jQuery, it would be better to work 100% with 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.
});