0

我有一个带有 1-5 个输入框的搜索 UI，它们会在其 change() 事件上产生 ajax 操作。

我还有一个“清除标准”按钮，单击该按钮应清除输入框。这工作正常，但我有一个我想摆脱的副作用。

如果用户在搜索输入中输入了数据，但尚未离开该字段（即 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 回答