我有以下两个函数。第一个是为自动完成功能编写的,第二个是用于检查用户是否从自动填充列表中选择了值。但是,由于我在这两个函数中使用了相同的AJAX功能,因此完成执行需要花费太多时间。有人可以帮助我优化我写的代码,使一个单一的功能?
我的代码如下:$('.dynamic_cat').keyup(function() {
$(".dynamic_cat").typeahead({
source: function(query, process) {
var textVal = $(".dynamic_cat").val();
var admin_url = $("#admin_url").val();
$.ajax({
url: admin_url+'modules/product_types/product_types.php',
type: 'POST',
data: 'op=get_all_categories',
dataType: 'JSON',
async: true,
success: function(data) {
process(data);
}
});
}
});
});
$(document).ready(function() {
$('.dynamic_cat').blur(function() {
if( $('.dynamic_cat').val() ) {
var textVal = $(".dynamic_cat").val();
var admin_url = $("#admin_url").val();
$.ajax({
url: admin_url+'modules/product_types/product_types.php',
type: 'POST',
data: 'op=get_all_categories',
dataType: 'JSON',
async: true,
success: function(data) {
if($.inArray(textVal, data) == -1) {
alert("Please select the value from list only!!!");
$('.dynamic_cat').val("");
}
}
});
}
});
});
你可以使用typeahead:selected event,来设置一个变量,如果value是从列表中选择的,在文本框的keyup上重置变量,然后在blur上,检查变量是否被设置为true,否则会提醒用户
提前输入自定义事件
演示链接完整示例
类似:
var isItemSelectedFromTypeAhead = false;
$('.dynamic_cat').keyup(function() {
//On keyup reset it
isItemSelectedFromTypeAhead = false;
$(".dynamic_cat").typeahead({
source: function(query, process) {
var textVal = $(".dynamic_cat").val();
var admin_url = $("#admin_url").val();
$.ajax({
url: admin_url+'modules/product_types/product_types.php',
type: 'POST',
data: 'op=get_all_categories',
dataType: 'JSON',
async: true,
success: function(data) {
process(data);
}
});
}
}).on('typeahead:selected', function(obj, selected, name) {
//Something is selected from typeahead
isItemSelectedFromTypeAhead = true;
});
$('.dynamic_cat').blur(function() {
var curValue = $(this).val();
if(curValue !== "" && !isItemSelectedFromTypeAhead)
{
alert("Please select the value from list only!!!");
$('.dynamic_cat').val("");
}
});