Question

我正在尝试使用bootstrap js为typeahead编写一个简单的代码片段。下面是我写的代码片段，但是typeahead不会工作，也没有列出建议。如果我做错了，你能否建议我。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="well">
<input type="text" class="span3" id="search" data-provide="typeahead" data-items="4" />
</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
    var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON']; 
    $('#search').typeahead({source: subjects});
</script>
</body>
</html>

Answer 1

问题是您正在使用已移除typeahead的Bootstrap 3.x.x.

您可以使用Twitter typeahead.js库。有一篇很好的博客文章（最后还有关于简单的集成）：https://blog.twitter.com/2013/twitter-typeaheadjs-you-autocomplete-me

<强>更新

在github上还有一个项目，它在Bootstrap中提供了back-typeahead：https://github.com/bassjobsen/Bootstrap-3-Typeahead

更新2

完整的工作示例：

$(function(){ 
    var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON']; 
    $('#search').typeahead({source: subjects});
});

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div class="well">
<input type="text" class="span3" id="search" data-provide="typeahead" data-items="4" />
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//rawgit.com/bassjobsen/Bootstrap-3-Typeahead/master/bootstrap3-typeahead.js"></script>

Answer 2

Bootstrap 3不再具有预先输入，单独获取它。

诀窍是 - “进程”回调函数期望结果格式为：

[{value：“string1”}，{value：“string2”}，{value：“string3”}]

而不仅仅是一个字符串数组，下面的代码与bootstrap3配合得非常好。

$('.typeahead').typeahead(
{ hint: true, highlight: true, minLength: 1 }, // options
{
    source: function (query, process) { // source dataset, data = array of strings
        $.getJSON('Home/Suggest', { query: query }, function (data) {
            //data=["string1", "string2", "string3"]
            //process callback function needs it 
            //in a format [{value: "string1"}, {value: "string2"}, {value: "string3"}]
            var output = $.map(data, function (string) { return { value: string }; });
            process(output);
        });
    }
});

Bootstrap的Typeahead问题

2 个答案: