javascript - 如何组合两个 jQuery 函数的代码以减少执行时间？

Question

我有两个函数。第一个是为了自动完成功能而编写的，第二个是为了检查用户是否从自动填充列表中选择了值而编写的。但由于我在这两个函数中使用了相同的 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("");
          }      
        }
      });
    } 
  });  
});

提前致谢。

Answer 1

您可以使用 typeahead:selected 事件来设置变量，如果从列表中选择值，则在文本框中的 keyup 上重置变量，然后在模糊时检查变量是否设置为 true，否则提醒用户。

Typeahead custom events

Demo link complete example

类似于:

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("");
  }
});