0

change() イベントで ajax アクションを引き起こす 1 ～ 5 個の入力ボックスを備えた検索 UI があります。

クリックすると入力ボックスをクリアする「基準をクリア」ボタンもあります。これは適切に機能しますが、1 つ取り除きたい副作用があります。

ユーザーが検索入力にデータを入力したが、まだフィールドを離れていない (つまり、change() が実行されていない) 場合に、「条件のクリア」をクリックすると、変更が実行され、ajax アクションが発生します。入力ボックスがクリアされます。

ユーザーが「クリア」ボタンをクリックした場合に change() が発生しないようにしたいと思います。

関数の作成を開始しましたが、入力ボックスがボタンserachChangeHandlerへのフォーカスを失っているかどうかを識別する方法がわかりません。.ui-clear

私の質問は次のとおりです。 変更ハンドラーで、フォーカスがどこに向かっているのか、または別の方向から問題にアプローチする必要があるのか​​ を伝えることができますか?

関連する JavaScript は次のようになります。

function displayResults(data) {
    $('.searchResults').html(data);
}

function searchChangeHandler(e) {
    ajaxSearch();
}

function ajaxSearch() {
    $('#selectedRecord').empty();
    if (isSearchable()) {
        var myForm = $('#searchForm');
        $.post(myForm.URL, myForm.serialize(), displayResults);
    } else {
        $('.searchResults').empty();
    }
}

function displayRecord(data) {
    $('#selectedRecord').html(data);
}

function searchResultClick(e) {
    $('.searchResult').removeClass('selected');
    $(this).addClass('selected');
    $.ajax({
        url: this.id,
        success: displayRecord,
        dataType: "html"
    });
}

function clearSearchClick() {
    $('.search input:text').val("");
    toggleClearButton(false);
    $('.searchResults').empty();
    $('.first').focus();
}

function isSearchable() {
    var allCrit = "";
    $('.search input:text').each(function () {
        allCrit += $(this).val();

    });
    return allCrit !== "";
}

function toggleClearButton(callback) {
    $('.ui-clear').toggleClass("clear-enabled", callback);
}

$(function () {
    toggleClearButton(isSearchable());
    $('.ui-clear').click(clearSearchClick);
    $('.search input:text').focusout(searchChangeHandler);
    $('.search input:text').keyup(function () { toggleClearButton(isSearchable()); });

    $(document).keypress(function (event) {
        if (event.which === 13) {
            event.preventDefault();
            ajaxSearch();
        }
    });
});
4

2 に答える 2

2

を使った単なるアイデアsetTimeout

function clearSearchClick(){
    $('.search input:text').val('');
}

function searchChangeHandler(){
    setTimeout(function(){
        if( isSearchable() )
        {
            // Fire your ajaxSearch() function
        }
    }, 500);
}

$(function(){
    $('.ui-clear').click(clearSearchClick);
    $('.search input:text').focusout(searchChangeHandler);
});

更新:また、入力の状態をチェックしてタイムアウト後に起動するため、関数を直接呼び出すのではなく、関数を$(document).keypress(...)呼び出す必要があります。searchChangeHandler()ajaxSearch()searchChangeHandler()ajaxSearch()

デモ。

于 2013-02-20T02:30:04.067 に答える
-1

このビットが問題を引き起こしているようです：

$('.search input:text').focusout(searchChangeHandler);

そして、この関数が呼び出されます:

function searchChangeHandler(e) {
    ajaxSearch();
}

*編集* * これらの機能の両方を削除できるはずであり、問​​題は解決するはずです!

于 2013-02-20T02:18:36.423 に答える