示例 Typeahead.js 代码不起作用答案

【问题标题】：Example Typeahead.js Code Not Working示例 Typeahead.js 代码不起作用
【发布时间】：2017-10-05 13:19:41
【问题描述】：

在我的浏览器中使用以下代码加载 HTML 文件时，我似乎无法让下拉菜单显示任何建议：

<html>
  <head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap-theme.min.css">
    <script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.1/typeahead.bundle.min.js"></script>
    <script type="text/javascript">
      var numbers = new Bloodhound({
      datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); },
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      local: [
      { num: 'one' },
      { num: 'two' },
      { num: 'three' },
      { num: 'four' },
      { num: 'five' },
      { num: 'six' },
      { num: 'seven' },
      { num: 'eight' },
      { num: 'nine' },
      { num: 'ten' }
      ]
      });

      numbers.initialize();

      $('.typeahead').typeahead(null, {
      displayKey: 'num',
      source: numbers.ttAdapter()
      });
    </script>
  </head>
  <body>
    <input class="typeahead" type="text" placeholder="numbers (1-10)" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;">
  </body>
</html>

【问题讨论】：

标签： typeahead.js

【解决方案1】：

我认为它不起作用，因为您在 <head> 中包含脚本标记，并且在看到 .typeahead 元素在正文中之前脚本正在执行。

一个简单的解决方法是使用 jQuery 的 $(document).ready() 回调来等待文档准备就绪，然后再执行此 javascript：

$(document).ready(function() {
    var numbers = new Bloodhound({
        datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: [
            { num: 'one' },
            { num: 'two' },
            { num: 'three' },
            { num: 'four' },
            { num: 'five' },
            { num: 'six' },
            { num: 'seven' },
            { num: 'eight' },
            { num: 'nine' },
            { num: 'ten' }
        ]
    });

    numbers.initialize();

    $('.typeahead').typeahead(null, {
        displayKey: 'num',
        source: numbers.ttAdapter()
    });
});

【讨论】：

【解决方案2】：

我在您的代码中找不到任何问题。你的代码对我来说非常好用。

JsFiddle DEMO 正在工作，添加了以下几个 CSS：

.typeahead,
.tt-query,
.tt-hint {
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-dropdown-menu {
  width: 422px;
  margin-top: 12px;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

【讨论】：

jsfiddle 之所以有效，是因为 jsfiddle 将 js 代码包装在 $(window).load(...) 中，这将等待 typeahead 元素加载后再运行 js
@iewebguy：现在更新了小提琴链接。不知道该链接是如何失效的。