&

js模糊查詢select內容并生成下拉框點選

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

liguoquan

2025年1月22日 11:49 本文熱度 366

：js模糊查詢select內容并生成下拉框點選

示例代碼：

<!DOCTYPE html>

<head>

<title>模糊查詢示例</title>

<style>

#dropdown {

display: none;

border: 1px solid #ccc;

max-height: 150px;

overflow-y: auto;

position: absolute;

background: white;

z-index: 1000;

}

.dropdown-item {

padding: 8px;

cursor: pointer;

text-align: left;

}

.dropdown-item:hover {

background-color: #f0f0f0;

}

</style>

</head>

<body>

</select>

document.getElementById('searchInput').addEventListener('input', function() {

const query = this.value.toLowerCase();

const dropdown = document.getElementById('dropdown');

const originalSelect = document.getElementById('originalSelect');

dropdown.innerHTML = '';

if (query) {

dropdown.style.display = 'block';

Array.from(originalSelect.options).forEach(option => {

if (option.text.toLowerCase().includes(query)) {

const div = document.createElement('div');

div.textContent = option.text;

div.className = 'dropdown-item';

div.onclick = function() {

document.getElementById('searchInput').value = option.text;

option.selected=true;// 賦值給輸入框

originalSelect.onchange();

dropdown.style.display = 'none'; // 隱藏下拉框

};

dropdown.appendChild(div);

}

});

} else {

dropdown.style.display = 'none';

}

});

document.addEventListener('click', function(event) {

const dropdown = document.getElementById('dropdown');

if (!document.getElementById('searchInput').contains(event.target)) {

dropdown.style.display = 'none';

}

});

</script>

</body>

</html>

該文章在 2025/1/22 11:49:08 編輯過

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。