我正在尝试构建一个非常轻量级的实时搜索作为jQuery自定义插件。
我想要实现的是，我在任何$('input[type="text"].js_test').liveSearch(successCallBackFn);上拨打input[type='text']，$.ajax()来自successCallBackFn()来电的数据正由<input class="js_test" type="text" name="test" value="" data-identifier="testajax" />
$(document).ready(function() {
$('.js_test').liveSearch(mySuccessCallback);
});
//callback
function mySuccessCallback($liveSearchTrigger, response) {
$('body').append(response.results_html);
}
//jQuery plugin
(function( $ ) {
$.fn.liveSearch = function(successCallbackFn) {
var $liveSearchTrigger = $(this);
$liveSearchTrigger.change(function() {
$.ajax({
url: '/ajax/livesearch/' + $(this).data('identifier'),
type: 'POST',
dataType: 'JSON',
data: {
search: this.value
},
success: function(response) {
if (response.success) {
if (typeof(successCallbackFn) !== 'undefined') {
return successCallbackFn($liveSearchTrigger, response);
}
}
}
});
});
return this;
};
}( jQuery ));
进行管理。在我的测试用例中，我只是将其添加到DOM中。
POST现在当我在输入中输入内容时，没有任何反应。 （Firefox）开发者工具向我显示没有XHR正在发生直到我再次点击浏览器窗口，然后正在处理response.results_html并且正在追加$('body')中的数据到$('.js_test').change(function() {
console.log($(this).val());
});
元素。
当我添加
$(document).ready()到POST功能的范围，任何更改都会立即注册。
为什么$('body').append()及其结果$liveSearchTrigger.change()仅在我重新聚焦浏览器窗口（通过点击它）后触发，我如何实现npm cache clean即时触发输入输入？
我确信我遗漏的东西非常小，因此这是我第一次尝试制作自定义jQuery插件。
答案 0 :(得分：1)
仅当元素失去对文本输入的关注时才会触发更改事件。
我建议重读：https://api.jquery.com/change/
并将您对.change（）调用的调用更改为 keypress（）或 keydown（）
如果您在输入中按下某个键时使用这些方法，则可以假设其值已更改并执行您的livesearch。
此处的Keypress文档：https://api.jquery.com/keypress/
注意：为了提高性能，您可能需要在检查中添加按下的键不是修饰符，即。转移或逃跑