利用 Bootstrap 的 typeahead 作为搜索功能

Question

我的 typeahead 工作得很好，但我对 Javascript 太缺乏经验，无法理解如何将输入的结果转换为链接。

<input type="text"
                       class="span3"
                       data-provide="typeahead"
                       placeholder="City Search:"
                       data-items="6"
                       autocomplete="off" 
                       data-source=[&quot;Neuchatel&quot;,&quot;Moutier&quot;]">

所以，我真的只是想知道如何将数据源中的字符串转换为指向其他页面的链接。希望这相当简单。

谢谢！

Answer 1

您可以轻松地将字符串转换为链接..

<input type="text" data-provide="typeahead" data-source="[&quot;/foo.html&quot;,&quot;http://www.google.com&quot;,&quot;/about.html&quot;]">

您是否还希望从输入中获取链接，然后导航到所选页面？

编辑： 导航到预先输入中选择的项目..

在这种情况下，您将定义一个对象映射，其中包含键（标签）和值（url），例如..

var data = {
  "login":"/login",
  "home":"/",
  "user":"/user",
  "tags":"/tags",
  "google":"http://google.com"
};

然后您将启动预先输入。 source 和 updater 函数将被定义为处理 1) 从地图对象创建 typeahead 数据源数组，以及 2) 在选择项目时导航到适当的 url..

$('.typeahead').typeahead({
  minLength:2,
  updater: function (item) {
        /* navigate to the selected item */
        window.location.href = data[item];
    },
  source: function (typeahead, query) {
    var links=[];
    for (var name in data){
        links.push(name); 
    }

    return links;
    }
});

Demo on Bootply