实用的自定义下拉框支持模糊搜索支持键盘上下选择

浏览：746次- 评论：0次- 发布时间：2023-08-26

Html

Css

自定义下拉框 支持模糊搜索 支持键盘上下选择 

    
    
        Option 1
        Option 2
        Option 3
        Option 4
        Option 5
    




    
    
        Option a
        Option b
        Option 3
        Option 4
        Option 5

let selects = document.querySelectorAll('.ldg-select');
selects.forEach(function(select) {

var selectInput = select.querySelector('.ldg-select-input');
    var selectdown = select.querySelector('.ldg-select-down');
    var selectItems = Array.from(selectdown.children);

// 显示下拉菜单
    selectInput.addEventListener('click', function() {
        selectdown.style.display = 'block';
    });

// 隐藏下拉菜单
    document.addEventListener('click', function(event) {
        const parent = event.target.closest('.ldg-select');
        if (parent != select) {
            selectdown.style.display = 'none';
        }
    });

// 选择选项
    selectItems.forEach(function(item) {
        item.addEventListener('click', function() {
            selectInput.value = item.textContent;
            selectdown.style.display = 'none';
        });
    });

// 监听键盘事件
    selectInput.addEventListener('keydown', function(event) {
        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
            event.preventDefault();
            var selectedItem = select.querySelector('.selected');

if (selectedItem) {
                selectedItem.classList.remove('selected');
                selectedItem = event.key === 'ArrowDown' ? selectedItem.nextElementSibling : selectedItem.previousElementSibling;
            }

if (!selectedItem) {
                selectedItem = event.key === 'ArrowDown' ? selectItems[0] : selectItems[selectItems.length - 1];
            }

selectedItem.classList.add('selected');
            selectInput.value = selectedItem.textContent;
        } else if (event.key === 'Enter') {
            event.preventDefault();
            selectdown.style.display = 'none';
        }
    });

// 监听输入事件
    selectInput.addEventListener('input', function() {
        var searchText = selectInput.value.toLowerCase();

selectItems.forEach(function(item) {
            var itemText = item.textContent.toLowerCase();

if (itemText.includes(searchText)) {
                item.style.display = 'block';
            } else {
                item.style.display = 'none';
            }
        });
    });
});

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：自定义下拉框支持模糊搜索支持键盘上下选择

使用div实现下拉框支持模糊搜索支持键盘上下选择页面中可以同时支持多个选择框

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取

实用的自定义下拉框支持模糊搜索支持键盘上下选择

自定义下拉框 支持模糊搜索 支持键盘上下选择

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

自定义下拉框支持模糊搜索支持键盘上下选择