[英]What is a clean way to check for input changes before issuing an ajax call
我有一个ASP.NET MVC 3项目,其中包含一个带有5个文本输入框的表单,允许用户输入搜索条件。
目前,当用户从一个字段切换到下一个字段时,我有$('.watched').blur(ajaxSearch);
发出我的ajaxSearch
函数的函数,这个工作正常,排序...
我的问题是,每次我通过字段标记,或者单击.searchResults
结果div中显示的值之一时, .searchResults
。
我在问题的最后把我当前的搜索javascript。
我想将值存储在文本框中,然后在发出另一个ajax调用之前检查它们是否有更改。
Psuedocode的想法
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();
});
而不是自己的功能。 你不能使用这个change
事件而不是blur
事件。
$('.watched').change(ajaxSearch);
仅当元素(input,textarea)的值更改然后模糊时才会发生更改事件。
更改事件在其值更改时发送到元素。 此事件仅限于元素,框和元素。 对于选择框,复选框和单选按钮,当用户使用鼠标进行选择时会立即触发事件,但对于其他元素类型(输入,textarea) , 事件将延迟到元素失去焦点。
// Bind to the blur event (and change event)
// but only trigger it when a new value is present:
$('.watched').on('blur change',function(e){
var $this = $(this),
curValue = $this.val(),
lastval = $this.data('last');
// check if it's a new value
if (lastVal != curVal){
// store new value
$this.data('last',curVal);
// now call ajax
ajaxSearch();
}
});
伪代码,但是利用能够存储在进行新查询时查询的最后已知值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.