Typeahead和Bloohdound与geojson标记

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

有一些我只是不明白在实施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>

来源

2015-11-04 Monduiz

立即上载，你必须抛出 Uncaught Error: invalid dataset name: CSJ 2014一个JS错误。这是因为typeahead.js不允许name中的空格。 “ ”只能由下划线，破折号，字母（a-z）和数字组成。“ 查看文档https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#datasets 你为什么不把它切换到CSJ_2014？

来源

2015-11-05 17:39:38 snkashis

好点。我尝试更改名称，但没有得到不同的结果。 – Monduiz

你在这里寻找的确切行为是什么？你的代码在哪里显示/隐藏基于血迹查询的地图特征？ – snkashis

我试图做的是这样的：用户在搜索框中输入文本以从标记图层找到特定的项目，并在列表中显示建议以点击。我在jsfiddle上的例子试图到达那里。 – Monduiz

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

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

来源

2015-11-17 20:35:29 Monduiz

Typeahead和Bloohdound与geojson标记

回答

相关问题