没有使用 typeahead 获取下拉列表

Question

我在执行预输入脚本时遇到问题。问题是由于某种原因我没有得到建议的下拉列表。它是从本地数组检索信息的基本脚本。 [看代码][1]

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

Answer 1

您缺少 jQuery 和预输入库。使用 Chrome 开发人员，按 F12，您将看到缺少的依赖项。在 jsfiddle 中，将库包含在左侧的 'external resources' 中，而不是将它们放在 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 设置不正确。您需要添加指向 typeahead 库的外部资源（在页面左侧）。

在 javascript 面板中，您需要单击 gear/cog 图标并将其指向使用 jQuery - 需要提前输入。

修改后的html用于fiddle:

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

修改后javascript用于fiddle:

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 获取下拉列表

Not getting the dropdown list using typeahead

jquery

typeahead.js