【发布时间】:2015-07-02 15:38:56
【问题描述】:
我从我正在关注的 Elasticsearch 和 AngularJS 教程中获得此代码。
试图弄清楚如何让自动完成功能在用户输入时在下拉列表中形成一个建议列表,而不是将链接显示为建议。
这里是html标记:
<ul class="suggestions" ng-show="showAutocomplete">
<li ng-repeat="suggestion in autocomplete.suggestions" ng-show="suggestion.options.length > 0">
<a href="#" ng-mousedown="searchForSuggestion()"><small>Search for —</small> {{suggestion.options[0].text}}</a>
<li ng-repeat="result in autocomplete.results">
<a href="https://www.example.com/all/?search={{result._source.title}}">{{result._source.title}}</a>
</li>
这里是js:
//Autocomplete
$scope.autocomplete = {
suggestions: []
};
$scope.showAutocomplete = false;
$scope.evaluateTerms = function(event) {
var inputTerms = $scope.searchTerms ? $scope.searchTerms.toLowerCase() : null;
if (event.keycode === 13) {
return;
}
if (inputTerms && inputTerms.length > 3) {
getSuggestions(inputTerms);
}
else if (!inputTerms) {
$scope.autocomplete = {};
$scope.showAutocomplete = false;
}
};
$scope.searchForSuggestion = function() {
$scope.searchTerms = $scope.autocomplete.suggestions[0].options[0].text;
$scope.search();
$scope.showAutocomplete = false;
};
var getSuggestions = function(query) {
searchService.getSuggestions(query).then(function(es_return) {
var suggestions = es_return.suggest.phraseSuggestion;
var results = es_return.hits.hits;
if (suggestions.length > 0) {
$scope.autocomplete.suggestions = suggestions;
}
else {
$scope.autocomplete.suggestions = [];
}
if (suggestions.length > 0) {
$scope.showAutocomplete = true;
}
else {
$scope.showAutocomplete = false;
}
});
};
html 标记中的第一个列表项给出 1 个建议(以链接的形式),第二个列表项给出一个链接列表作为建议。我喜欢多个建议的列表想法,但只想要文本短语而不是用户可以选择的链接。有什么想法吗?
【问题讨论】: