基本的 AngularJS 实时搜索行为不规律

Question

在我的 angular-rails 应用程序中，我试图实现一个非常基本的实时数据库搜索，这样在 keyup 上，结果数组会随着输入值的变化而填充或取消填充。目前数据库表中大约有 400 种产品，但未来可能会更多。这是我的代码：

在 Rails 端，产品控制器内部：

def index
  @products = Product.search(params[:search]);
  render json: @products
end

还有我的 product.rb 文件：

def self.search(search)
  where("name iLIKE ?", "%#{search}%")
end

在角度方面，在相关控制器内部：

function MainController(dataService) {

  var ctrl = this
  ctrl.searchResultsArray = [];

  ctrl.populateArray = function(search) {
    dataService.getProductSummaries(search)
    .then(function(response){
      ctrl.searchResultsArray = response.data
    })
  };

};

在我的数据服务中：

function dataService($http) {

  var ctrl = this
  ctrl.getProductSummaries = function(search) {
    return $http({
      method: 'GET',
      url: '/products',
      params: { search: search }
    });
  };

};

在我的角度视图内（由MainController as ctrl 控制）：

  <input ng-keyup="ctrl.populateArray(ctrl.result)" ng-model="ctrl.result" />

  <div ng-repeat="result in ctrl.searchResultsArray">
    <li>
      {{ result.name }} costs {{ result.price }}
    </li>
  </div>

上面的代码大部分都可以，但是输入太快会导致它短路，而且我偶尔会在我的开发控制台中看到错误，所以肯定是坏了。它遗漏了什么或做错了什么？

Answer 1

因此，由于您预计输入速度过快会出现问题 - 我不确定您在控制台中是否存在真正的错误。您很可能会看到canceled 状态代码，因为您已经启动了对与以前相同的 url 的新查询。

但是，我可以建议以下几个技巧来加快您的查询速度：

1. 只有当用户输入超过 3 个符号时，您才能启动请求。
2. 考虑一下您的 Rails 控制器中的.limit(n)。根据业务需求，您可以/不能限制从控制器返回的匹配数量。
3. 据我所知，您只需要 Product 模型的 name 和 price 字段。所以你可以缩小响应大小。您可以使用任何 json builder gem，例如 jbuilder，或者简单地尝试类似 json：@products.select(:name, :price) - 它只会从数据库中导出选定的列。
4. 要加速数据库查询，您可以将索引添加到名称列。