【问题标题】:autocomplete/typeahead angularjs bootstrap on elasticsearchelasticsearch上的自动完成/提前输入angularjs引导程序
【发布时间】:2014-12-15 04:37:47
【问题描述】:

我正在寻找一种可行的解决方案,以便在弹性搜索服务器上使用 angularjs&bootstrap 自动完成/提前输入。

【问题讨论】:

  • 把这个问题拆分成问答不是更好吗?
  • 我在问题/答案中拆分它;)

标签: angularjs twitter-bootstrap autocomplete elasticsearch


【解决方案1】:

这是一个可行的解决方案,不是问题,但我想分享它希望它会有所帮助:

调用自动完成功能的html代码:

 <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"
 />
  • 包含 elasticsearch (v2.4.0) 脚本 有空here

  • 我的弹性搜索服务

    interfaceApp.service('elasticQuery', function ($rootScope,esFactory) {
      return esFactory({ host: $rootScope.elastic_host}); //'localhost:9200'
    });
    
  • angularjs代码查询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;
        });
      }
    });
    

希望对你有帮助

【讨论】:

  • 您介意发布示例的 html/js 代码吗?
  • 告诉我你需要什么
  • 好吧,我已经从此处提供的 angular-ui 文档中找到了解决方法:angular-ui.github.io/bootstrap 但是您的代码 sn-p 让我了解了如何从 json 中提取数据。为此投票。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-08-06
  • 2013-08-06
  • 2017-09-11
  • 2014-06-13
  • 1970-01-01
相关资源
最近更新 更多