我不确定这是否已经存在于其他库中，但我想做的是实现一个 typesense-style 搜索，在您输入搜索词时为您提供结果。
源是一个 json 对象，当窗口加载时，客户端将获取该对象。它将有大约 10K 个我想要搜索的键。例如：https://redditstatsbot.com/json/alphabetbot.json
我不想想要做的是必须输入完整的密钥。用户必须能够通过输入其 ID 的前几个字母来获取其唯一的 ID。
例如，输入“str”将产生以“str”开头的所有键，
["stranger", "strongman", "stranded", ... ]所以基本上，我不认为成熟的 Typesense 实现对于我的需求是必要的，因为这不是一个庞大的数据库，但我不太确定我的其他选择是什么。
HTML和CSS可以设置样式，但这只是它的基本实现。它所做的几乎就是每次输入内容时检查搜索栏的输入，然后搜索结果数组中的任何内容都以与搜索栏的输入相同的方式开始。然后，使用搜索结果的容器，根据结果数量，它会用可能的每个结果填充其内部的 div。
let results = ['stranger', 'strong', 'strength', 'stretch', 'stress'];
document.getElementById('search_bar').addEventListener('input', function() {
// Check if the input value's string starts the same as any search results
let input = this.value;
let possible_results = [];
let resultsContainer = document.getElementById('search_results');
let containerChildren = resultsContainer.children;
for (let i = 0; i < results.length; i++) {
if (results[i].startsWith(input)) {
possible_results.push(results[i]);
}
}
for (let i = 0; i < containerChildren.length - possible_results.length; i++) {
possible_results.push("");
}
for (let i = 0; i < containerChildren.length; i++) {
containerChildren[i].innerHTML = possible_results[i];
}
});<html>
<body>
<input id='search_bar' placeholder='Search Here'>
<div id='search_results'>
<div></div>
<div></div>
</div>
</body>
</html>