AngularJs自動完成工作正在運行

使用Elasticsearch和AngularJS構建一個小型搜索應用程序，幾乎有自動完成工作，使用AngularJS Bootstrap typeahead，但我無法顯示ES返回的實際建議。AngularJs自動完成工作正在運行

我有這樣的承諾，正在恢復從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; 
    };

結果這是AngularJS UI引導的東西HTML

<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>

而且這是在控制器中的getSuggestions功能

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

我在下拉列表中看到5條建議，但我沒有訪問th Ë實際值......我所得到的是這樣的，重複5次

[object Object]

我敢肯定它有事情做這一行

var phrases = es_return.hits.hits;

我的console.log輸出這個

[Object, Object, Object, Object, Object]

我不太清楚如何來訪問ES結果_source對象的「autocomplete_field」價值？

UPDATE的下拉菜單中的模板是

<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>

更新2這裏的例子JSON響應

{ 
    "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" 
      } 
     } 
     } 
    }

來源

2016-07-02 user3125823

你的模板是什麼樣的？ –

在getSuggestions（$ viewValue）「'（where title'應該是顯示屬性，可能應該是'uib-typeahead =」查詢query.title，但由於你沒有提供JSON，所以我只能猜猜正確的屬性名稱） –

@MikeRobinson對不起有關延遲，請看看上面的UPDATE，有下拉模板 – user3125823

看到你的JSON的結構之後，我可以告訴大家，您需要將uib-typeahead屬性更改爲：

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

來源

2016-07-05 19:49:19

AngularJs自動完成工作正在運行

回答

相關問題