user3125823 user3125823 - 5 months ago 70
Javascript Question

AngularJs autocomplete almost working

Building a small search app using Elasticsearch and AngularJS, nearly have autocomplete working using the AngularJS Bootstrap typeahead, but I'm having trouble displaying the actual suggestions returned by ES.

I have this promise that is returning the results from ES

this.getSuggestions = function(query) {
var deferred = $q.defer();

esClient.search({
index: 'autocomplete',
body: {
"query": {
"match_phrase_prefix": {
"autocomplete_field": {
"query": query,
"max_expansions": 10
}
}
},
"size": 5,
"from": 0,
"_source": ["autocomplete_field"]
}
}).then(function(es_return) {
deferred.resolve(es_return);
}, function(error) {
deferred.reject(error);
});

return deferred.promise;
};


This is the HTML with AngularJS UI Bootstrap stuff

<input type="text" name="q" ng-model="searchTerms" placeholder="Search" class="form-control input-lg" uib-typeahead="query for query in getSuggestions($viewValue)" typeahead-on-select="search($item)" typeahead-popup-template-url="customPopupTemplate.html" auto-focus>


And this is the getSuggestions function in the controller

//get suggestions
$scope.getSuggestions = function(query) {
$scope.isSearching = true;
return searchService.getSuggestions(query).then(function(es_return){
var phrases = es_return.hits.hits;
console.log(phrases);
if (phrases) {
return $scope.autocomplete.suggestions = phrases;
};
$scope.isSearching = false;
});
};


I'm getting 5 suggestions in the dropdown, but I'm not accessing the actual value... what I get is this, repeated 5 times

[object Object]


I'm pretty sure it has something to do with this line

var phrases = es_return.hits.hits;


My console.log outputs this

[Object, Object, Object, Object, Object]


I'm not quite sure how to access the value of "autocomplete_field" in the
_source
object of the ES results?

UPDATE The template for the dropdown menu is

<ul class="dropdown-menu" role="listbox">
<li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }"
ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{::match.id}}">
<div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
</li>
</ul>


UPDATE 2 and here an example json response

{
"took": 5,
"timed_out": false,
"_shards": {
"total": 1,
"successful": 1,
"failed": 0
},
"hits": {
"total": 3,
"max_score": 2.5897822,
"hits": [
{
"_index": "autocomplete",
"_type": "suggestions",
"_id": "229",
"_score": 2.5897822,
"_source": {
"autocomplete_field": "fast and furious"
}
},
{
"_index": "autocomplete",
"_type": "suggestions",
"_id": "230",
"_score": 2.5897822,
"_source": {
"autocomplete_field": "die hard"
}
},
{
"_index": "autocomplete",
"_type": "suggestions",
"_id": "107",
"_score": 1.7686365,
"_source": {
"autocomplete_field": "the bourne identity"
}
}
}
}

Answer

After seeing the structure of your JSON, I can tell that you need to change the uib-typeahead attribute to this:

uib-typeahead="query as query._source.autocomplete_field for query in getSuggestions($viewValue)"
Comments