9

ここでは、すべての人の名前が Facebook API から取得されるコードを記述します。そしてそれはライトボックスに表示されています。javasciprt/jquery を使用して検索機能を実装したいと思います。検索機能を実装する方法を教えてください。

   <div> <input type="text" id="search-criteria"/>
    <input type="button" id="search" value="search" onClick="tes();"/> </div>
<fieldset>
    <legend>Invite Facebook Friend</legend>

    <div class="fbbox">
    <img src="images/User.png" class="fbimg" />
    <div class="fix"><label for="check-2" class="left"> James </label></div>
    <input type="checkbox" name="fb" id="check-1" value="action" class="leftcx"/>
    </div>

    <div class="fbbox">
    <img src="images/User.png" class="fbimg" />
    <div class="fix"><label for="check-2" class="left">Alan </label></div>
    <input type="checkbox" name="fb" id="check-2" value="comedy" class="leftcx"/>
    </div>

    <div class="fbbox">
    <img src="images/User.png" class="fbimg" />
    <div class="fix"><label for="check-3" class="left"> Mathew </label></div>
    <input type="checkbox" name="fb" id="check-3" value="epic" class="leftcx"/>
    </div>

画像

4

4 に答える 4

18 
$("#search-criteria").on("keyup", function() {
    var g = $(this).val();
    $(".fbbox .fix label").each( function() {
        var s = $(this).text();
        if (s.indexOf(g)!=-1) {
            $(this).parent().parent().show();
        }
        else {
            $(this).parent().parent().hide();
        }
    });
});​

働くフィドル

またはより良い方法:

$("#search-criteria").on("keyup", function() {
    var g = $(this).val().toLowerCase();
    $(".fbbox .fix label").each(function() {
        var s = $(this).text().toLowerCase();
        $(this).closest('.fbbox')[ s.indexOf(g) !== -1 ? 'show' : 'hide' ]();
    });
});​

働くフィドル

于 2012-12-25T14:33:33.690 に答える
1

Jqueryを使用する 

​  $(document).ready(function(){

   var search = $("#search-criteria");
   var items  = $(".fbbox");

   $("#search").on("click", function(e){

        var v = search.val().toLowerCase();
       if(v == "") { 
           items.show();
           return;
       }
        $.each(items, function(){
            var it = $(this);
            var lb = it.find("label").text().toLowerCase();
            if(lb.indexOf(v) == -1) 
                 it.hide();
        });
    });        
});​

デモ: http://jsfiddle.net/C3PEc/2/

于 2012-12-25T14:27:02.987 に答える
0

IE7/IE8 では機能しない可能性があるため、代わりに正規表現を使用できます。正規表現indexOfを使用すると、'i' 修飾子を使用して検索の大文字と小文字を区別しないようにすることもできます。

ありがとう

于 2012-12-26T09:20:39.467 に答える
0

おそらくindexOfメソッドを使用してください：

var text ="some name";
var search = "some";

if (text.indexOf(search)!=-1) {

    // do someting with found item

}
于 2012-12-25T14:22:34.007 に答える