Question

我有一个带有1-5个输入框的搜索UI，这些输入框会对他们的change（）事件产生ajax操作。

我还有一个'清除标准'按钮，单击时应清除输入框。这很正常，但我有一个副作用，我想摆脱它。

如果用户在搜索输入中输入了数据，但尚未离开该字段（即change（）未触发），并且他们单击“清除标准”，则会导致更改触发和ajax操作发生，然后输入框清除。

如果用户点击“清除”按钮，我想停止更改（）。

我开始编写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();
        }
    });
});

Answer 1

使用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()。

DEMO

Answer 2

看起来这个位导致了问题：

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

这个函数在这里被称为：

function searchChangeHandler(e) {
    ajaxSearch();
}

*编辑 * * 应该能够删除这两个功能，问题应该消失！

单击清除按钮后如何保持jquery change（）不被触发

2 个答案: