1

jQueryを使用して検索を実装しようとしています。

ユーザーが「zzz」などの検索文字列を入力できるようにし、「ul リスト」をループして、検索文字列を含む値を持つ「li」のみを選択したいと考えています。

たとえば、zzz が検索文字列である場合、値が 'zzzzaaa' である 2 番目の 'li' のみを選択します。

<ul class="inputs-list"><li>
   <label class="user">
      <input type="checkbox" value="abcd" name="optionsCheckboxes">
      <img style="height: 30px;" src="http://boom.dailymus.es/v1/users/profile/502245329/square">
      <span>abcdefg</span>
   </label>
</li>

<li>
  <label class="user">
    <input type="checkbox" value="zzzzaaaa" name="optionsCheckboxes">
    <img style="height: 30px;" src="http://boom.dailymus.es/v1/users/profile/547205429/square">
    <span>zzzzz</span>
  </label>
</li>

次のコードで試しましたが、役に立ちませんでした

$.each @inputs_list.find('li'), (index, user) ->
  if user.find('input')[value *='#{searchString}']
     console.log('selected', user)

検索が機能するようにコードを変更するにはどうすればよいですか?

4

4 に答える 4

4

以下は、「.inputs-list」の子孫であるすべてのチェックボックスを取得し、メソッドを使用してセットを値プロパティに検索文字列を含むものに減らし、.filter()メソッドを使用して、一致する入力が属する li 要素を取得します。に：.closest()

var searchString = "zzz"; // obviously you'd get this from the user somehow

searchString = searchString.toLowerCase();
var matchingLIs = $("ul.inputs-list :checkbox").filter(function(){
                    return this.value.toLowerCase().indexOf(searchString) != -1;
                  }).closest("li");

一致する li 要素に対して/で実際に何をしたいのかを明確にしませんが、一致しないものをすべて非表示にしたい場合は、次のようにします。

$("ul.inputs-list > li").hide();
$("ul.inputs-list :checkbox").filter(function(i){
    return this.value.toLowerCase().indexOf(searchString) != -1;
}).closest("li").show();
于 2012-05-16T06:59:16.903 に答える
2

:contains私はjQueryを見てみましょう

$("div:contains('John')").css("text-decoration", "underline");

http://api.jquery.com/contains-selector/

$('.inputs-list').find("li:contains('" + searchString + "')").css("text-decoration", "underline");

そのようなものは私が試みるものです...

于 2012-05-16T06:36:45.880 に答える
1

jQuery で非表示/表示する

最初に、私は次のようなことをします：

// Real-time filtering, when the key is released
$("#terms").on("keyup", function(e){

  // Hide all list items, get those that match, show them
  $(".inputs-list li").hide().filter(function(){
    return $(this).text().match( new RegExp( e.target.value ) );
  }).show();

});

リストのサイズによっては、要素が表示されないフラッシュが発生する可能性があると思います。私は現在、より良いアプローチに取り組んでいます。

デモ: http://jsbin.com/uzotiy/edit#javascript,html

CSSで隠す/見せる

CSS を使用した要素の操作は、jQuery よりもはるかに高速で効率的です。そのため、このメソッドは「ハイライト」クラスを追加および削除するだけです。displayクラス ルールは、一致した要素の強調表示または設定を担当する必要があります。

$("#terms").on("keyup", function(e){
  $(".inputs-list li")
    .removeClass("highlight")
    .filter(":contains(" + e.target.value + ")")
      .addClass("highlight");
});

デモ: http://jsbin.com/uzotiy/2/edit#source

于 2012-05-16T07:02:11.217 に答える
0

これを試して

ここで、クラス検索は検索テキストボックスです。

        $(document).ready(function()
        {
            $(".search").keyup(function()
            {
                var key=this.value;

                if(key.length>2)
                {
                    $(".user").each(function()
                    {
                        $this=$(this).find("input:first");
                        var val=$this.val();
                        var res = val.indexOf(key);


                        if(res!=-1)
                        {

                            $this.attr("checked","checked");
                        } 
                        else
                        {            
                            $this.removeAttr("checked");
                        }

                    });
                }
            });
        });
于 2012-05-16T07:20:48.293 に答える