无法获得typeahead.js工作,没有结果将显示(Can't get typeahead

2019-10-24 09:37发布

我一直试图让typeahead.js到现在2个工作日内,我不相信它应该是这个又硬。 到目前为止还没有一个简单的例子都工作过,我坚持,首先要弄清楚什么错误。

首先,我typeahead.bundle.js文件从该存储库下载:

https://github.com/twitter/typeahead.js/tree/master/dist

我的代码如下所示:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Typeahead example</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  </head>
  <body>

    <input id="search"/>

  <!-- jQuery -->
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <!-- Latest compiled and minified Bootstrap -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <!-- Latest Typeahead.js -->
  <script src="typeahead.bundle.js"></script>

  <script type="text/javascript">
  var colors = ["red", "blue", "green", "yellow", "brown", "black"];

  $(document).ready(function() {

    $('#search').typeahead({source: colors});
  })

  </script>
  </body>
</html>

请帮我想出解决办法。

编辑 :从sakir的回答,我现在已经改变了我的Javascript代码,以适应10版语法,但它仍然不会显示任何建议:

  <script type="text/javascript">
  var colors = ["red", "blue", "green", "yellow", "brown", "black"];

  $(document).ready(function() {

    $('#search').typeahead({
     highlight: true,
     hint: false
     }, colors);
  });

  </script>

Answer 1:

我猜你的例子只能用预输入0.9.x版本version.with 10个版本的工作,似乎有一些值得注意的changes.u可以看看这里的更多信息。

我测试你的榜样与预输入版本0.9和它的作品fine.Here是正在运行的样品。

http://jsfiddle.net/179yevon/

如果u想使用最新版本的预输入的,美国可以再检查一下例子在这里

如u可以看到,从第一实例中,源参数接受那样的功能source: substringMatcher(states) 。 可能是你可以根据该修改代码

更新与10节,U可以做taht这样的事情。

  var colors = ["red", "blue", "green", "yellow", "brown", "black"];

var colorsource = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  // `states` is an array of state names defined in "The Basics"
  local: colors
});

$('#search').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'color',
  source: colorsource
});

这里是小提琴手

http://jsfiddle.net/qug5qdnp/

*什么bloodhood这样做是根据预输入源准备数据源。 作为源上述获得的功能参数和功能期望类型的字符串array.source未来只接受字符串数组和,u需要将其转换为数组的数组,如果不打算使用bloodhood



文章来源: Can't get typeahead.js to work, no results will show