Typeahead.js 下拉菜单不出现
Posted
技术标签:
【中文标题】Typeahead.js 下拉菜单不出现【英文标题】：Typehead.js dropdown does not appear 【发布时间】：2019-08-25 17:10:15 【问题描述】：我一直试图让 typehead.js 库在从 mysql 数据库中提取的下拉列表上工作一段时间，但它没有工作。我决定先尝试基础知识，并尝试从简单的数组而不是数据库中填充下拉列表，如 typehead.js docs examples 所示。
我创建了this codepen，但我也无法让下拉菜单在那里工作。
我将 typehead.js 库复制到 codepen 的 JS 部分。这是我的 html：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Typehead</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<style>
.typeahead z-index: 1051;
</style>
</head>
<body>
<div id="the-basics">
<input class="typeahead" type="text" placeholder="States of USA">
</div>
<script>
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)
);
</script>
</body>
下拉列表根本不出现。
【问题讨论】：
【参考方案1】：在您的情况下，复制粘贴脚本似乎已损坏。只需从这样的 CDN 导入即可
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"> </script>
查看此codepen
【讨论】：
以上是关于Typeahead.js 下拉菜单不出现的主要内容，如果未能解决你的问题，请参考以下文章