0

jQuery UI オートコンプリート検索に基づいて、ページのコンテンツを除外しようとしています。ユーザーが検索に関係のないコンテンツを入力すると、display: none; に切り替わります。そのため、検索に関連するコンテンツのみが表示されます。

HTML

        <div class="items" data-id="Get Milk">Get Milk on the way home</div>
        <div class="items" data-id="Drop by Phil's">Drop by Phils house</div>
        <div class="items" data-id="Grab a Sandwich">Grab a sandwich</div>

<input id="auto" type="text" />

Javascript

$(function () {
    var source = $(".items").map(function () {
        return $(this).data("id");
    }).get();

    $("#auto").autocomplete({
        source: source        
    });
});​

しようとする

$(document).ready(function () {

    var search = $("#auto").html();
    var results = $(".items").html();

    if (search == results) {
        $(".items").css("display", "block");
    } 
    else {
        $(".items").css("display", "none");
    }

});

これで、個々の「アイテム」を参照する必要があること、およびこれについてもわかりやすく説明する必要があることがわかりました。jsfiddle: http://jsfiddle.net/J5rVP/25/ Andrew Whitaker 提供、bit.ly/U1gjr2より

4

1 に答える 1

1

OK、まず最初に、jQueryUI ウィジェットを扱っていることを理解する必要があります。それらは素晴らしく拡張可能ですが、ドキュメントを掘り下げて、それらがどのように機能するかを確実に理解する必要があります.

オートコンプリートを開始するときは、必要に応じて一致のチェックと非表示を行うことができる応答関数を提供する必要があります。このような：

$("#auto").autocomplete({
    source: source,
    response: function(event, ui){
        if(ui.content.length == 0)
            alert("nothing");
        else
           alert(ui.content.length + " items");
    }
});

最後に、オートコンプリートのドキュメントをよく読んでください。そこでは、jQuery UI API について多くのことを学ぶことができます。

http://api.jqueryui.com/autocomplete/

于 2012-12-21T02:32:11.247 に答える