gpt4 book ai didi

javascript - Typeahead.js 下拉菜单不出现

转载 作者:行者123 更新时间:2023-11-29 20:41:10 26 4
gpt4 key购买 nike

一段时间以来,我一直在尝试让 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>

下拉列表根本没有出现。

最佳答案

在您的情况下,复制粘贴脚本似乎已损坏。只需像这样从 CDN 导入即可

<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js">
</script>

检查这个 codepen

关于javascript - Typeahead.js 下拉菜单不出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55507570/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com