5

I was looking for a working solution to get autocomplete/typeahead with angularjs&bootstrap on elasticsearch server.

2
  • Wouldn't be better if you split this question in Question + Answer? Commented Apr 16, 2015 at 5:48
  • 1
    i split it in question / Answer ;) Commented Apr 16, 2015 at 14:44

1 Answer 1

5

This is a working solution, not a question, but I want to share it hope it will help:

the html code to call the autocomplete function :

 <input required type="text"
   popover-trigger="focus"
   placeholder="recherche globale"
   class="form-control"
   ng-model="simplequeryInput"
   ng-model-onblur focus-on="focusMe"
   ng-click="searchSimple=true" ng-keyup="$event.keyCode == 13 ? submitSimple() : null"
   typeahead="item for item in autocomplete($viewValue) | limitTo:15 "
   typeahead-on-select="simplequeryInput=$model"
 />
  • Include the elasticsearch (v2.4.0) script available here

  • my elasticsearch service

    interfaceApp.service('elasticQuery', function ($rootScope,esFactory) {
      return esFactory({ host: $rootScope.elastic_host}); //'localhost:9200'
    });
    
  • angularjs code querying elasticsearch :

    'use strict';
    var searchModules = angular.module('searchModules', ['ngRoute','ngDialog']);
    searchModules.controller('searchCtrl', function (ngDialog,$scope, $http,$rootScope, elasticQuery) {
      ...
      $scope.autocomplete = function(val) {
        var keywords = [];
        keywords.push(val);
        // THIS RETURN IS VERY IMPORTANT 
        return elasticQuery.search({
          index: 'YOUR_INDEX_NAME',
          size: 15,
          body: {
            "fields" : ["T_FAMILY","T_GENUS","T_SCIENTIFICNAME"], // the fields you need
            "query" : {
            "bool" : {
              "must" : [
                {
                  "query_string" : {
                    "query" : "T_FAMILY:"+val // i want only source where FAMILY == val
                  }
                }
              ]
            }
            }
          }
        }).then(function (response) {
          for (var i in response.hits.hits) {
            var fields = (response.hits.hits[i]).fields;
            var tmpObject = fields["T_FAMILY"] +" " + fields["T_GENUS"] + " ( "+fields["T_SCIENTIFICNAME"] + " )";
            keywords.push(tmpObject);
          }
        return keywords;
        });
      }
    });
    

hope it helps

Sign up to request clarification or add additional context in comments.

3 Comments

Do you mind posting the html/js code for the sample?
tell me what did you need
Well I had found the way to work it from the angular-ui documentation available here: angular-ui.github.io/bootstrap But your code snippet gave me an idea of how to extract data out of the json. Vote up for that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.