Bootstrap 的提前输入问题

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

问题是您正在使用 Bootstrap 3.x.x，其中删除了 typeahead。

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

更新

github 上还有一个项目，它在 Bootstrap 中提供了提前输入：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

Bootstrap3没有预输入了，另行获取

诀窍是 - "process" 回调函数需要以下格式的结果：

[{值："string1"}，{值："string2"}，{值："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 Issue with Bootstrap

jquery

typeahead

twitter-bootstrap