1

記事の短いリストを含むニュースルームのページがあります。これにはデータベースや CMS を使用していないので、当面は、検索ボックスを使用してタイトルのリストを解析するクイック検索機能を実装したいと思います。

入力ボックスへの入力を開始し、おそらく .find() を使用して記事のリストを解析し、検索ボックスの下にリストまたは結果を div (オートコンプリートと同様) に表示して、記事へのリンクは、記事自体をクリックできるようにします。私はすでにjQueryを使用しているので、jQueryUIも使用する必要はありません。これを達成する方法に関するヒントはありますか?

4

1 に答える 1

1

この種のあなたが求めているものですか？jsfiddle

$(function() {
    $("#searchbox").on("keyup", function() {

        var search = $(this).val().toLowerCase();
        $("#results").empty()

        if(search.trim().length) {
            var hits = $("#articles .articlelink").filter(function() {
                return $(this).text().toLowerCase().indexOf(search) !== -1;
            });
            $("#results").append(hits.clone());
        }        

    });
});​

返されるリンクの数を制限するには、次を使用できます.slice()。

var hits = $("#articles .articlelink").filter(function() {
    return $(this).text().toLowerCase().indexOf(search) !== -1;
}).slice(0,3); //return max three items

slice()使用は、すべての要素を返し、作成後にリストを切り捨てるだけなので、あまり効果的な手法ではないことに注意してください。で返される要素の数を数えることができfilter()ますが、上記のコードははるかにクリーンです。そして、パフォーマンスが実際に問題にならない限り、私はそれをどのように行うか。

存在しないものを検索するときにデフォルトの「結果なし」メッセージを提供する場合は、hits配列の長さが0であるかどうかを確認してください。

if (hits.length) {
    $("#results").append(hits.clone());
} else {
    $("#results").append("<li>No results!</li>");
}

上記の変更でフィドルを更新：フィドル

于 2012-08-10T13:31:51.987 に答える