简体   繁体   English

无法使typeahead.js正常工作,不会显示任何结果

[英]Can't get typeahead.js to work, no results will show

I've been trying to get typeahead.js to work for 2 days now, and I refuse to believe it should be this hard. 我一直在尝试让typeahead.js工作2天,但我拒绝相信这样做会很困难。 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: 首先,我的typeahead.bundle.js文件是从此存储库下载的:

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: 编辑 :从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>

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 here for more info. 我想您的示例仅适用于typeahead 0.9.x版本。对于10版本,似乎有显着变化。您可以在此处查看更多信息。

I tested your example with the typeahead version 0.9 and it works fine.Here is the running sample. 我使用预输入版本0.9测试了您的示例,它运行正常,以下是运行示例。

http://jsfiddle.net/179yevon/

if u wanna use the latest version of typeahead ,u can chech the examples here 如果您想使用最新版本的typeahead,可以在此处查看示例

as u can see that from first example , source parameter accept a function like that source: substringMatcher(states) . 如您所见,从第一个示例开始,source参数接受类似于source: substringMatcher(states)的函数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. 使用v.10 更新 ,u可以执行以下操作。

  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 如上所述,源将函数作为参数,函数期望字符串array。前面类型的source仅接受字符串数组,并且如果不打算使用流血风格,则需要将其转换为数组的数组

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM