有关自动完成性能的建议

Question

我需要提高自动填充脚本的性能。我需要的是当我点击输入框elementID时，它将填充来自search.php的选择列表，返回json_encode。以下脚本正在运行。但每当我点击输入框时，它都需要一段时间才能生成列表。

("#elementID")
.autocomplete({
  source: function(request, response) {
    $.ajax({
      url: "search.php",
      dataType: "json",
      success: function(data){
        response(data[0]);                                  
      }
    });
  },
  minLength: 0,
  delay: 0,
  select: function(event, ui){
    $(this).val(ui.item.value);
  },
  change: function( event, ui ) { //remove if not click from drop down
    if (!ui.item) {
      $(this).val("");
    }
   }                            
})      
.click(function() {  //Click to activate
  $( "#elementID" ).autocomplete("search", " ");
});     

在search.php中

   $ocidb ->strTable     = "table";
   $ocidb ->strField     = "column1";
   $ocidb ->strCondition = "coulmn1 is not null";
   $result                = $ocidb->ORASelectRecord();
   echo json_encode(filter_unique_array($result, 'coulmn1'));
   return;

想知道我是在做正确的事还是有其他正确的方法来做到这一点？

Answer 1

首先，您应该检查缓慢来源的位置。在Chrome开发者工具中，转到“网络”标签，查看加载自动填充列表所需的时间：

这将告诉您问题是在服务器端还是在客户端。如果时间或延迟一起大于300毫秒，那么服务器的等待可能非常明显。您可能希望对服务器端代码进行基准测试，并查看瓶颈所在。从您的代码中，您可能希望在数据库中强制执行唯一性，而不是在PHP代码中强制执行。

如果服务器迅速响应，则问题可能在于您的JavaScript。尝试寻找不同的自动完成库或尝试使其缓存DOM元素，而不是每次都重新创建它们。

一般来说，某些类型的缓存和可能的预取（在用户请求之前加载初始结果集）应该在典型情况下有所帮助。