Question

我有以下问题。我从1.4.8开始使用Angular 1.6.6。

＆＃13;

<input type="select" class="form-control pull-right"
  placeholder="Enter IPC or Project Reference" ng-model="systemState.quickSearchTerm"
  uib-typeahead-on-select="selectQuickSearchResult($item)"
  uib-typeahead="result.display for result in quickSearchResults"
  ng-change="quickSearch()" uib-typeahead-wait-ms="200" ng-model-options="{debounce: 500}"
  typeahead-min-length="4"
/>

＆＃13;

在用户键入前4个字符后，输入将在我的数据库中搜索匹配的条目。当我键入第5个字符时，我开始看到匹配结果，但搜索是关于前4个字符。我会更好地解释：假设我有一个条目5112。如果我输入5112，没有结果，但如果我输入51123，则返回5112。有什么帮助吗？

非常感谢。

Answer 1

尝试如下..

sourceArray表达式可以使用特殊的$ viewValue变量对应于输入内输入的值。

<input type="select" class="form-control pull-right"
  placeholder="Enter IPC or Project Reference" ng-model="systemState.quickSearchTerm"
  uib-typeahead-on-select="selectQuickSearchResult($item)"
  uib-typeahead="result.display for result in quickSearchResults | filter:{display :$viewValue}"
  ng-change="quickSearch()" uib-typeahead-wait-ms="200" ng-model-options="{debounce: 500}"
  typeahead-min-length="4"
/>

Answer 2

我会说，只要用户输入到预先query框，就会搜索input。由于我们已经使用了debounce，因此在调用服务器之前需要等待500ms。

要使typeahead从API获取数据，每次在quickSearch($viewValue)指令上使用uib-typeahead方法（请查看下面的html）并从$http返回quickSearch承诺每次都是方法。

<强> HTML

<input type="select" class="form-control pull-right"
  placeholder="Enter IPC or Project Reference" 
  ng-model="systemState.quickSearchTerm"
  uib-typeahead-on-select="selectQuickSearchResult($item)"
  uib-typeahead="result.display for result in quickSearch($viewValue)"
  typeahead-loading="loadingLocations"
  typeahead-no-results="noResults"
  uib-typeahead-wait-ms="200" ng-model-options="{debounce: 500}"
  typeahead-min-length="4"
/>
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noResults">
  <i class="glyphicon glyphicon-remove"></i> No Results Found
</div>

<强>控制器

//If you could show me quickSearch method, I can help you to correct this method.
$scope.quickSearch = function (query){
  //I assumed you returned $http to make ajax
  return $http.get('url?query='+query).then(function(){
    return response.data;
  })
}

Answer 3

解决了！除了属性uib-typeahead之外，我删除了所有uib- *前缀。它有效。

Angular 1.6.6和uib-typeahead不能正常工作

3 个答案: