エラー：構文エラー、認識されない式：[データ検索用語* = 1.23.4]

Question

Iの場合には、その後1.2.3.4を入力した場合、私は私は、Li

<li class="list_items" data-search-term="annuál plánt accidénts "> 
    <div class="row"> 
     <div class="col-xs-2 col-md-1"></div> 
     <div class="col-xs-10 col-md-11"> 
      <div class="item"> 
       <div class="item-title">Annuál Plánt Accidénts<span class="pull-right"><input type="checkbox" value="Annuál Plánt Accidénts" name="checkbox"></span></div> 
      </div> 
     </div> 
    </div> 
</li> 
<li class="list_items" data-search-term="chiller output temperature "> 
    <div class="row"> 
     <div class="col-xs-2 col-md-1"></div> 
     <div class="col-xs-10 col-md-11"> 
      <div class="item"> 
       <div class="item-title">Chiller Output Temperature<span class="pull-right"><input type="checkbox" value="Chiller Output Temperature" name="checkbox"></span></div> 
      </div> 
     </div> 
    </div> 
</li> 

のデータ要素を検索する検索入力フィールドを有しますjQueryで「認識されない」エラーが発生します。ここでは、コードは次のとおりです。

$('.live-search-box').on('keyup', function() { 
    $("#del").show(); 
    var searchTerm = $(this).val().toLowerCase(); 
    // alert(searchTerm); 
    $('.live-search-list li').each(function() { 
     if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) { //alert('if'); $(this).show(); } else { //alert('else'); $(this).hide(); } }); }); 
     }); 
    } 

Error: Syntax error, unrecognized expression: [data-search-term *= 1.23.4]

Answer 1

まず、お使いのjQueryのコードは、いくつかの構文上の問題やミスマッチブラケットとブレースを持っています。

エラーは、クラスセレクタとして解釈される.文字が含まれているため、属性セレクタに指定した値を引用符で囲む必要があるためです。 filter()だけを使用してコードを単純化すると、関連する要素をループせずに非表示にすることもできます。これを試してみてください：

$('.live-search-box').on('keyup', function() { 
    $("#del").show(); 
    var searchTerm = $(this).val().toLowerCase(); 
    $('.live-search-list li').hide().filter('[data-search-term*="' + searchTerm + '"]').show(); 
});