Question

我想在geojson中带有标记图层的搜索框中使用typeahead和bloodhound。使用位于引导导航栏中的传单地图和搜索框，用户可以查找地图上显示的项目。

在实施猎犬和先行者时，我有些不明白。我无法使它发挥作用。

首先，我使用array.push方法使用此代码将信息从图层发送到数组：

   function  onEachFeatureProj(feature, layer) {
var ProjPopup = 
    '<strong>Organization: ' + feature.properties.OrgName + '</strong>';
 ProjSearch.push({
    name: layer.feature.properties.OrgName,
    source: "CSJ 2014",
    id: L.stamp(layer),
    lat: layer.feature.geometry.coordinates[1],
    lng: layer.feature.geometry.coordinates[0]
  });
layer.bindPopup(ProjPopup);
}

然后，我定义了猎犬元素：

  var ProjBH = new Bloodhound({
name: "CSJ 2014",
datumTokenizer: function (d) {
  return Bloodhound.tokenizers.whitespace(d.OrgName);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: ProjSearch,
limit: 10
  });
  ProjBH.initialize();

最后，我开始预先输入以将其发送到搜索框：

  /* instantiate the typeahead UI */
  $("#searchbox").typeahead({
    minLength: 3,
    highlight: true,
    hint: false
  }, {
    name: "CSJ 2014",
    displayKey: "name",
    source: ProjBH.ttAdapter(),
    templates: {
      header: "<h4 class='typeahead-header'>Projects</h4>",
      suggestion: Handlebars.compile(["{{name}}"].join(""))
    } 
  });

Jsfiddle：http://jsfiddle.net/Monduiz/dzo5yg72/

修改

我终于找到了问题。我错过了一些接收内容的html元素：

 <table class="table table-hover" id="feature-list">
        <tbody class="list"></tbody>
 </table>

Answer 1

在加载时，您立即抛出了JS错误 Uncaught Error: invalid dataset name: CSJ 2014。这是因为typeahead.js不允许name中的空格。 ＆＃34;只能由下划线，短划线，字母（a-z）和数字组成。＆＃34; 查看https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#datasets处的文档为什么不将其切换为CSJ_2014？

Answer 2

我终于找到了问题。我错过了一些接收内容的html元素：

 <table class="table table-hover" id="feature-list">
    <tbody class="list"></tbody>
 </table>

Typeahead和Bloohdound与geojson标记

2 个答案: