0

誰かが入力ボックスに単語を入力し、クリックするとリスト項目が非表示になったときに基本的なフィルターを使用しようとしています。これはクロムでは正常に機能しますが、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 に答える