Question

我遇到了inslemting typeahead脚本的问题。问题是由于某种原因我没有得到建议的下拉列表。它是从本地数组中检索信息的基本脚本。 [看看代码] [1]

[1]：https://jsfiddle.net/d1ycqemc/# enter code here

Answer 1

您缺少jQuery和typeahead库。使用Chrome开发人员，按F12，您将看到缺少的依赖项。在jsfiddle中，将库包含在左侧的“外部资源”中，而不是将它们放在javascript块中

 enter code here<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>  <script src="jquery.typeahead.min.js"></script>

https://jsfiddle.net/05z5ddv0/

祝你好运！

Answer 2

I would recommend looking through the jsFiddle documentation.

jsfiddle未正确设置。您需要添加指向预先存储库的外部资源（位于页面左侧）。

在javascript面板中，您需要点击gear / cog图标并将其指向使用jQuery - 这是类型需要的。

修改后的html用于小提琴：

<div id="container">
  <div id="the-basics">
    <input class="typeahead" type="text" placeholder="States of USA" />
  </div>
</div>

修改后的javascript用于小提琴：

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });

    cb(matches);
  };
};

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

$('#the-basics .typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
}, {
  name: 'states',
  source: substringMatcher(states)
});

Here is your fiddle corrected with those changes, and the script tags removed.

没有使用typeahead获取下拉列表

2 个答案: