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

};

在我的dataService中：

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状态代码，因为您已经像以前一样向同一个网址发起了新查询。

然而，这里有一些技巧，我可以建议你加快查询速度：

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

基本的AngularJS实时搜索行为不正常

1 个答案: