javascript - 在发出 ajax 调用之前检查输入更改的干净方法是什么

Question

我有一个 ASP.NET MVC 3 项目，其中的表单带有 5 个文本输入框，允许用户输入搜索条件。

目前，当用户从一个字段切换到下一个字段时，我有一个 $('.watched').blur(ajaxSearch); 函数来发出我的 ajaxSearch 功能，这工作正常，有点......

我的问题是，每次我通过选项卡浏览字段或单击 .searchResults 结果 div 中显示的值之一时，ajaxSearch 都会被调用。

我已将当前搜索 JavaScript 放在问题末尾。

我想将值存储在文本框中，然后在发出另一个 ajax 调用之前检查它们是否发生更改。

伪代码想法

var oldvalues =  {}
function saveCurrentValues() {
    foreach( input box on the form ) {
       save the currentvalue of the input box into oldvalues['inputboxid']
    }
}

function isNewSearch() {
    foreach( input box on the form ) {
        if (oldvalues['inputbox.id'] !== input box value) {
            return true;
        }
    }
    return false;
}

我不确定如何实现 foreach 和 oldvalues 赋值。一些 javascript 专家能否为我指出这个实现的正确方向。 (我在下面的 JavaScript 中添加了注释行，我认为这个实现应该真正完成工作。)

javascript

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

function ajaxSearch() {
    // if (isNewSearch() ) {
    //    saveCurrentValues();
          $('#selectedRecord').empty();
          var myForm = $('#searchForm');
          $.post(myForm.URL, myForm.serialize(), displayResults);
    //}
}

$(function () {
    $('.watched').blur(ajaxSearch);
    //saveCurrentValues();
});

Answer 1

而不是自己制作函数。您不能使用此 change 事件来代替 blur 事件吗？

$('.watched').change(ajaxSearch);

仅当元素(input, textarea)的值发生更改并模糊时，才会发生更改事件。

当元素的值发生变化时，更改事件会发送到元素。本次事件仅限元素、盒子和元素。对于选择框、复选框和单选按钮，当用户使用鼠标进行选择时，该事件会立即触发，但对于其他元素类型(input, textarea) ，事件被推迟，直到元素失去焦点。

Here is Documentation