Twitter Bootstrap 3.0 Typeahead AJAX 示例

Question

有很多针对Bootstrap 2的typeahead ajax示例，例如这个 twitter bootstrap typeahead ajax example。

然而，我正在使用Bootstrap 3，但我没有找到完整的示例，只有一堆不完整的信息片段和指向其他网站的链接，例如这个Where is the typeahead JavaScript module in Bootstrap 3 RC 1?

如果您通过ajax从服务器加载数据，并且每次用户更改输入时都需要加载数据，请问有人能否发布一个完整的工作示例以演示如何在Bootstrap 3中使用typeahead？

- Pascal Klein

---

这个示例适用于Bootstrap 3 http://bootply.com/86571 - Carol Skelly

@Baghoo，我正在寻找一个通过Ajax远程获取数据的示例。 - Pascal Klein

Answer 1

使用bootstrap3-typeahead插件，我通过以下代码使其正常工作：

<input id="typeahead-input" type="text" data-provide="typeahead" />

<script type="text/javascript">
jQuery(document).ready(function() {
    $('#typeahead-input').typeahead({
        source: function (query, process) {
            return $.get('search?q=' + query, function (data) {
                return process(data.search_results);
            });
        }
    });
})
</script>

后端提供 search GET 端点下的搜索服务，接收查询内容放在 q 参数中，并以{ 'search_results': ['resultA', 'resultB', ... ] } 的JSON格式返回结果。在Typeahead输入框中显示 search_results 数组的元素。

- Michael

---

对我来说，“https://github.com/bassjobsen/Bootstrap-3-Typeahead”也是最快的升级方式。 - magicrebirth

超棒。文档中找不到完整的示例。这个答案非常有帮助。 - Anupam

在这里还找到了一个很好的例子：http://tatiyants.com/how-to-use-json-objects-with-twitter-bootstrap-typeahead/ - Anupam

工作正常，但不幸的是建议下拉框。 - BASEER HAIDER JAFRI

process 是什么意思？ - Powerriegel

Answer 2

以下是我根据 typeahead examples 的灵感，从我们正在开发的 Scala/PlayFramework 应用程序中逐步获得的经验。

在一个名为 LearnerNameTypeAhead.coffee 的脚本中（当然可以转换为 JS），我有：

$ ->
  learners = new Bloodhound(
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value")
    queryTokenizer: Bloodhound.tokenizers.whitespace
    remote: "/learner/namelike?nameLikeStr=%QUERY"
  )
  learners.initialize()
  $("#firstName").typeahead 
    minLength: 3
    hint: true
    highlight:true
   ,
    name: "learners"
    displayKey: "value"
    source: learners.ttAdapter()

我在页面中包含了typeahead捆绑包和我的脚本，并且有一个围绕输入字段的

，如下所示：

<script src=@routes.Assets.at("javascripts/typeahead.bundle.js")></script>
<script src=@routes.Assets.at("javascripts/LearnerNameTypeAhead.js") type="text/javascript" ></script>
<div>
  <input name="firstName" id="firstName" class="typeahead" placeholder="First Name" value="@firstName">
</div>

每次在输入框中输入超过第一个 minLength (3) 个字符后，页面会发出一个 GET 请求，URL 的格式类似于 /learner/namelike?nameLikeStr= 加上当前输入的字符。服务器代码返回一个包含字段 "id" 和 "value" 的 json 数组对象，例如：

[ {
    "id": "109",
    "value": "Graham Jones"
  },
  {
    "id": "5833",
    "value": "Hezekiah Jones"
} ]

我需要在路由文件中添加一些内容才能进行游戏：

GET /learner/namelike controllers.Learners.namesLike(nameLikeStr:String)

最后，我在一个新的typeahead.css文件中为下拉菜单等设置了一些样式，并将其包含在页面的标签（或可访问的.css文件）中。

.tt-dropdown-menu {
  width: 252px;
  margin-top: 12px;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.typeahead {
  background-color: #fff;
}
.typeahead:focus {
  border: 2px solid #0097cf;
}
.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
  color: #999
}
.tt-suggestion {
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;
}
.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;
}
.tt-suggestion p {
  margin: 0;
}

- wwkudu

---

你从哪里获取的样式？没有它们，在我的BS-3项目中看起来很糟糕。有了样式，它看起来很棒。 - raider33

@raider33 我想我是从检查 Twitter Typeahead Examples 页面中获取它们的。我可能不得不稍微调整以适应我的项目样式。 - wwkudu

这个 Bloodhound 类是什么？您能否请发 JavaScript 而不是 CoffeeScript？我知道我可以将其转换，但我认为每个人都能阅读 CoffeeScript，但反过来则不然。 - Pascal Klein

@PascalKlein Bloodhound是建议引擎，它根据已输入的内容决定要返回哪些选项的代码。更多文档请参见TypeAhead页面。用他们的话来说，TypeAhead有两个部分：UI视图（Typeahead）和建议引擎（在这种情况下是Bloodhound）。 - wwkudu

谢谢您的示例。 "确保在脚本中引用的是 div id，而不是 input id" -> 实际上您在引用 $("#getLearnerLike .typeahead")，这是该 div 中的输入字段。 - Christof

Answer 3

我正在使用这个https://github.com/biggora/bootstrap-ajax-typeahead。

使用Codeigniter/PHP编写的代码结果。

<pre>

$("#produto").typeahead({
        onSelect: function(item) {
            console.log(item);
            getProductInfs(item);
        },
        ajax: {
            url: path + 'produto/getProdName/',
            timeout: 500,
            displayField: "concat",
            valueField: "idproduto",
            triggerLength: 1,
            method: "post",
            dataType: "JSON",
            preDispatch: function (query) {
                showLoadingMask(true);
                return {
                    search: query
                }
            },
            preProcess: function (data) {

                if (data.success === false) {
                    return false;
                }else{
                    return data;    
                }                
            }               
        }
    });
</pre>   

- Luiz Fernando Fonseca

---

这是针对 Twitter Bootstrap 2.0+ 的。 - Pascal Klein

Answer 4

在这里，您可以找到有关升级到v3的信息：http://tosbourn.com/2013/08/javascript/upgrading-from-bootstraps-typeahead-to-typeahead-js/

这里还有一些示例：http://twitter.github.io/typeahead.js/examples/

- netcult

---

你的意思是什么升级？你能否在这里提供一个有效的例子。 - Pascal Klein

我的意思是，如果你有一个适用于Bootstrap2的工作类型提示，你可以使用这些信息进行升级。第二个链接可能对你更有帮助？ - netcult

该链接已失效，请将内容放在答案中，而不是外部链接。 - Keith

Answer 5

<input id="typeahead-input" type="text" data-provide="typeahead" />

<script type="text/javascript">
var data = ["Aamir", "Amol", "Ayesh", "Sameera", "Sumera", "Kajol", "Kamal",
  "Akash", "Robin", "Roshan", "Aryan"];
$(function() {
    $('#typeahead-input').typeahead({
        source: function (query, process) {
               process(data);
            });
        }
    });
});
</script>

- Aamir Parre

---

如果回答不是100%的代码，它可能会更好。 - johnnyRose