0

現在、次のように、検索フィールドがフィルターとして機能するページを作成しています。

// Custom case insensitive selector
jQuery.expr[':'].Contains = function(a,i,m) { 
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

// Search field filter
var $section = $('section');

$('#search').keyup(function() {
    var input = $(this).val();

    if(input) {
        $section.hide();
        $("section:Contains('"+input+"')").show();
    }
    else {
        $section.show();
    }
});

問題なく動作しますが、解決したい問題が 1 つあります。入力した文字列が存在しない場合<section>、ページは空白のままになります。

私の質問は非常に単純です。フィルターで結果が見つからない場合、ページにデフォルトのメッセージを表示するにはどうすればよいですか? <p>「結果が見つかりませんでした」という簡単な説明のようなもの。

アイデアは、文字列が見つからない限り一度だけ表示することです。

ご協力いただきありがとうございます。

4

2 に答える 2

4

私は次のことをやった：

リストの最後にエラー メッセージを作成します。

<p id="noresults">Error message.</p>

必要に応じて表示/非表示。

// Search field filter
var $section = $('section');
var $noresults = $('#noresults');

$noresults.hide();

$('#search').bind('keyup', function() {
    var input = $(this).val();

    if(input) {
        $section.hide();
        var result = $("section:Contains('"+input+"')");

        if(result.length) {
            $noresults.hide();
            result.show();
        } else {
            $noresults.show();
        }
    }
    else {
        $noresults.hide();
        $section.show();
    }
});
于 2013-01-15T15:24:39.837 に答える
1

最初に一致する要素の長さを確認してください。

var elements = $("section:Contains('"+input+"')");
if(elements.length) //Found
    elements.show();
else
    //display a message
    $("body").append("<p>No results were found.</p>");
于 2013-01-15T14:02:56.360 に答える