8

ユーザーが入力している間に結果を返す（オートコンプリート）Facebookのような検索を実装しようとしています。ここに私が使用しているjqueryコードがあります：

$(document).ready(function(){
    $("#searchField").keyup(function() 
    {
        var searchbox = $(this).val();
            if(searchbox=='')
            {
            $("#searchDisplay").html('').hide();
            }
            else
            {
                $.ajax({
                url: "ajax/?do=search_users&q="+ searchbox+"",
                //data: dataString,
                cache: false,
                    success: function(html)
                    {
                        $("#searchDisplay").html(html).show();
                    }
                });
            }return false;    
    });
});

$("#searchField").focusout(function(){
    $("#searchDisplay").slideUp();
});

$("#searchField").focus(function(){
    if($("#searchDisplay").html() != ''){
        $("#searchDisplay").slideDown();
    }
});

返される結果は div 構造です。どうすればよいかわかりませんが、ユーザーがキーボードの [UP] キーと [DOWN] キーを使用して結果を確認し、[ENTER] ボタンを押して結果を選択できるようにすることです。

追加情報

ここにあるdisplay_box：

<div id="searchDisplay">
                echo '<a href="'.$_config['http'].$username.'"><div class="display_box" align="left">';
                echo '<img src="'.$img.'"  style="width:25px; float:left; margin-right:6px" />';
                echo $name.'<br/>';
                echo '<span style="font-size:9px; color:#999999">'.$username.'</span></div></a>';
</div>

HTML マークアップ 

    <a href="ahoora"><div class="display_box" align="left">
    <img src="http://domain.com/upload/thumbs/ahoora_1336145552.jpg" style="width:25px; float:left; margin-right:6px">
<strong>a</strong>hour<strong>a</strong><br>
<span style="font-size:9px; color:#999999"><strong>a</strong>hoor<strong>a</strong></span>
</div></a>

各結果には上記の html コードがあり<div>、id=searchDisplay.

*php のエコー部分には while ループがあることに注意してください。上記のコードは、html がどのように表示されるかを示したものです (searchDisplay は結果と同じページにありません。jquery コードを確認してください)。

4

5 に答える 5

4

jQuery UI オートコンプリートは、コードを追加することなく、この機能を適切に処理します。

http://jqueryui.com/demos/autocomplete/

簡単な入門書として、この URL のデモを参照してください。

于 2012-05-09T04:45:16.900 に答える
4

アクションをキーボード ショートカットにバインドできるようにする jQuery プラグインがあります。カーソルキーを使用してアイテムのリストをナビゲートするために使用しました：

https://github.com/jeresig/jquery.hotkeys

プラグインを使用してショートカット キーを定義するのは、次のように簡単です。

$(document).bind('keydown', 'ctrl+a', fn);
于 2012-05-07T00:16:49.893 に答える
2

このコードを試してください...ブックマークコレクションから見つけました

http://www.9lessons.info/2009/06/autosuggestion-with-jquery-ajax-and-php.html

于 2012-05-03T09:31:01.943 に答える
2

私はあなたのコードを少し書き直しました、同じことをするべきです、ただ読みやすくそしてもう少し効率的です：

$("#searchField").on({
    keyup : function(e) {
        var code = (e.keyCode ? e.keyCode : e.which),
            searchbox = this.value,
            Sdisplay = $("#searchDisplay");
        if(searchbox=='') {
            Sdisplay.html('').hide();
        }else{
           $.ajax({
            url: "ajax/?do=search_users&q="+ searchbox+"",
            //data: dataString,
            cache: false
           }).done(function(html) {
               Sdisplay.html(html).show();
           });
        }
    },
    focus: function() {
        $("#searchDisplay").slideDown();        
    },
    blur: function() {
        $("#searchDisplay").slideUp();
    }
});

検索結果については、各<a>要素をターゲットにすることもできますが、サイトに他の<a>要素がある可能性があるため、ターゲットを簡単にするためにラッパーを追加します。これは、jQueryのwrap（）とeach（ ）関数ですが、可能であれば、次のようにPHPに追加するのが最も簡単です。

<div id="searchDisplay">
    echo '<div class="wrapper">';
    echo '<a href="'.$_config['http'].$username.'">';
    echo '<div class="display_box" align="left">';
    echo '<img src="'.$img.'" style="width:25px; float:left; margin-right:6px" />';
    echo $name.'<br/>';
    echo '<span style="font-size:9px; color:#999999">'.$username.'</span></div></a>';
    echo '</div>';
</div>

上/下矢印キーで結果を切り替えたり、検索結果の場所を変更したりする場合は、次のようにします（前に追加した.wrapperクラスの使用に注意してください）。

if (code == 40 || code == 38 || code == 13) {//arrow keys and enter
    if ($("#searchDisplay").is(':visible')) {
        switch (code) {
            case 40: //arrow down
               act = act > $('.wrapper').length-2 ? 0 : act+1;
               $(".wrapper").removeClass('active').eq(act).addClass('active');
            break;
            case 38: //arrow up
               act = act < 1 ? $('.wrapper').length-1 : act-1;
               $(".wrapper").removeClass('active').eq(act).addClass('active');
            break;
            case 13: //enter key
               var ViElms = $('.wrapper').filter(':visible').filter('.active').length;
               if (ViElms) { //if there are any search results visible with the active class
                   var link = $('.wrapper').eq(act).find('a')[0].href;
                   window.location.href = link;
               }
           break;
     }
}

ここで、いくつかのセレクターをキャッシュし、それをkeyup関数と組み合わせるには、次のようにします。

$(document).ready(function() {
    var act = -1;
    $("#searchField").on({
        keyup: function(e) {
            var code = (e.keyCode ? e.keyCode : e.which),
                searchbox = this.value,
                Sdisplay = $("#searchDisplay"),
                wrappers = $('.wrapper'); //there's that class again
            if (searchbox == '') {
                Sdisplay.html('').hide();
            } else {
                Sdisplay.show();
                if (code == 40 || code == 38 || code == 13) { //do not search on arrow keys and enter
                    if (Sdisplay.is(':visible')) {
                        switch (code) {
                        case 40: //arrow down
                            act = act > wrappers.length - 2 ? 0 : act + 1;
                            wrappers.removeClass('active').eq(act).addClass('active');
                            break;
                        case 38: //arrow up
                            act = act < 1 ? wrappers.length - 1 : act - 1;
                            wrappers.removeClass('active').eq(act).addClass('active');
                            break;
                        case 13: //enter
                            var ViElms = wrappers.filter(':visible').filter('.active').length;
                            if (ViElms) { //if there are any search results visible with the active class
                               var link = wrappers.eq(act).find('a')[0].href;
                               window.location.href = link;
                            }
                            break;
                        }
                    }
                } else { //do search
                    $.ajax({
                       url: "ajax/?do=search_users&q="+ searchbox+"",
                       //data: dataString,
                       cache: false
                    }).done(function(html) {
                       Sdisplay.html(html).show();
                    });
                }
            }
        },
        focus: function() {
            $("#searchDisplay").slideDown();
        },
        blur: function() {
            $("#searchDisplay").slideUp();
        }
    });
});​

これがデモンストレーションです

于 2012-05-09T15:10:18.610 に答える
1

これを試して。リストをスクロールし、最初/最後を過ぎると一番上/一番下に戻ります。

<script type="text/javascript">
<!--
$(document).ready(function() {
    $("#searchbox").on("keydown",handleKeys);
});
function handleKeys(e) {

    var keyCode=e.keyCode? e.keyCode : e.charCode;
    if (keyCode==40 && $("a.activeoption").length==0) {
        $("a").eq(0).addClass("activeoption");
    } else if (keyCode==40 && $("a.activeoption").length!=0) {
        $("a.activeoption").next().addClass("activeoption");
        $("a.activeoption").eq(0).removeClass("activeoption");
        if ($("a.activeoption").length==0)
            $("a").eq(0).addClass("activeoption");
    } else if (keyCode==38 && $("a.activeoption").length==0) {
        $("a").last().addClass("activeoption");
    } else if (keyCode==38 && $("a.activeoption").length!=0) {
        var toSelect=$("a.activeoption").prev("a");
        $("a.activeoption").eq(0).removeClass("activeoption");
        toSelect.addClass("activeoption");
        if ($("a.activeoption").length==0)
            $("a").last().addClass("activeoption");
    } else if (keyCode==13) {
        window.location=$("a.activeoption")[0].href;
    }
}
//-->
</script>

デモ: http://www.dstrout.net/pub/keyscroll.htm

于 2012-05-09T02:57:14.907 に答える