Can't get typeahead.js to work, no results wil

2019-08-12 13:03发布

站内问答 / JavaScript
1701 1 5

I've been trying to get typeahead.js to work for 2 days now, and I refuse to believe it should be this hard. Not a single example have worked so far, and I'm stuck with figuring out what is going wrong.

First of all, my typeahead.bundle.js file is downloaded from this repository:

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

My code looks like this:

<!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>

Please help me figure this out.

EDIT: From sakir's answer, I've now changed my Javascript code to fit the version 10 syntax, but it still won't show any suggestions:

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

  $(document).ready(function() {

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

  </script>

1条回答
做自己的国王
2楼-- · 2019-08-12 13:11

I guess your example only work with typeahead 0.9.x version.with the 10 version,it seems there are notable changes.u can take a look at herefor more info.

I tested your example with the typeahead version 0.9 and it works fine.Here is the running sample.

http://jsfiddle.net/179yevon/

if u wanna use the latest version of typeahead ,u can chech the examples here

as u can see that from first example , source parameter accept a function like that source: substringMatcher(states). May be you can change your code according to that

update With the v.10,u can do taht something like this.

  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
});

Here is the fiddler

http://jsfiddle.net/qug5qdnp/

*what bloodhood do that is prepare the datasource according to typeahead source. As mentioned above that source get the function as parameter and function expect the string array.source of the type ahead only accept an array of string and ,u need to convert it to array of the array if not planning to use bloodhood

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)