过滤大列表并在〜20个“结果”以下显示下拉菜单
Posted
技术标签:
【中文标题】过滤大列表并在〜20个“结果”以下显示下拉菜单【英文标题】：Filter large list and show drop down menu once below ~20 "results" 【发布时间】：2021-12-08 22:26:39 【问题描述】：我有一个包含大约 1000 个条目的列表。这些将在未来扩展到多达 3000 个。这些条目对用户来说不是很容易记住，但是一旦用户看到字符串，他们就能够识别他们正在寻找的内容。由于显示包含数千个条目的下拉列表非常难看并且浏览器中断，因此我试图想办法在用户输入查询时过滤列表并将下拉列表显示一次下降到大约 20 个左右条目。
我找不到任何用于此功能的预构建下拉模块。我正在考虑编写一些 js/jquery 来监视输入文本框并在后台过滤结果，当它们达到 20 时，change 将文本框替换为带有过滤的条目。但是，我不知道如何写这个。有没有更好的方法，或者我可以使用一些预构建的库？
【问题讨论】：
也许这是适合你的：***.com/questions/29154877/… 这能回答你的问题吗？ Jquery: Filter dropdown list as you type 看看使用带有下拉列表的过滤器。 link 【参考方案1】：我为你创建了这个 js Fiddle，它是纯 html、CSS 和 javascript。
HTML -
<!DOCTYPE html>
<!-- Created By codeWithAMi - Don't forget to subscribe the channel -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Autocomplete Search Box | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<div class="search-input">
<a href="" target="_blank" hidden></a>
<input type="text" placeholder="Type to search..">
<div class="autocom-box">
<!-- here list are inserted from javascript -->
</div>
<div class="icon"><i class="fas fa-search"></i></div>
</div>
</div>
<script src="js/suggestions.js"></script>
<script src="js/script.js"></script>
</body>
</html>
CSS -
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
body
background: #644bff;
padding: 0 20px;
::selection
color: #fff;
background: #664AFF;
.wrapper
max-width: 450px;
margin: 150px auto;
.wrapper .search-input
background: #fff;
width: 100%;
border-radius: 5px;
position: relative;
box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.12);
.search-input input
height: 55px;
width: 100%;
outline: none;
border: none;
border-radius: 5px;
padding: 0 60px 0 20px;
font-size: 18px;
box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
.search-input.active input
border-radius: 5px 5px 0 0;
.search-input .autocom-box
padding: 0;
opacity: 0;
pointer-events: none;
max-height: 280px;
overflow-y: auto;
.search-input.active .autocom-box
padding: 10px 8px;
opacity: 1;
pointer-events: auto;
.autocom-box li
list-style: none;
padding: 8px 12px;
display: none;
width: 100%;
cursor: default;
border-radius: 3px;
.search-input.active .autocom-box li
display: block;
.autocom-box li:hover
background: #efefef;
.search-input .icon
position: absolute;
right: 0px;
top: 0px;
height: 55px;
width: 55px;
text-align: center;
line-height: 55px;
font-size: 20px;
color: #644bff;
cursor: pointer;
JS
let suggestions = [
"Channel",
"CODEWITHAMI",
"codeWithAmi",
"YouTube",
"YouTuber",
"YouTube Channel",
"TECH Channel",
"Bollywood",
"Vlogger",
"Vechiles",
"Facebook",
"Freelancer",
"Facebook Page",
"Designer",
"Developer",
"Web Designer",
"Web Developer",
"Login Form in HTML & CSS",
"How to learn HTML & CSS",
"How to learn JavaScript",
"How to became Freelancer",
"How to became Web Designer",
"How to start Gaming Channel",
"How to start YouTube Channel",
"What does HTML stands for?",
"What does CSS stands for?",
];
// getting all required elements
const searchWrapper = document.querySelector(".search-input");
const inputBox = searchWrapper.querySelector("input");
const suggBox = searchWrapper.querySelector(".autocom-box");
const icon = searchWrapper.querySelector(".icon");
let linkTag = searchWrapper.querySelector("a");
let webLink;
// if user press any key and release
inputBox.onkeyup = (e)=>
let userData = e.target.value; //user enetered data
let emptyArray = [];
if(userData)
icon.onclick = ()=>
webLink = `https://www.google.com/search?q=$userData`;
linkTag.setAttribute("href", webLink);
linkTag.click();
emptyArray = suggestions.filter((data)=>
//filtering array value and user characters to lowercase and return only those words which are start with user enetered chars
return data.toLocaleLowerCase().startsWith(userData.toLocaleLowerCase());
);
emptyArray = emptyArray.map((data)=>
// passing return data inside li tag
return data = `<li>$data</li>`;
);
searchWrapper.classList.add("active"); //show autocomplete box
showSuggestions(emptyArray);
let allList = suggBox.querySelectorAll("li");
for (let i = 0; i < allList.length; i++)
//adding onclick attribute in all li tag
allList[i].setAttribute("onclick", "select(this)");
else
searchWrapper.classList.remove("active"); //hide autocomplete box
function select(element)
let selectData = element.textContent;
inputBox.value = selectData;
icon.onclick = ()=>
webLink = `https://www.google.com/search?q=$selectData`;
linkTag.setAttribute("href", webLink);
linkTag.click();
searchWrapper.classList.remove("active");
function showSuggestions(list)
let listData;
if(!list.length)
userValue = inputBox.value;
listData = `<li>$userValue</li>`;
else
listData = list.join('');
suggBox.innerHTML = listData;
https://jsfiddle.net/Amir_Khan064/04f7qbv5/4/
【讨论】：
以上是关于过滤大列表并在〜20个“结果”以下显示下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章