纯JS实现自动补全下拉框：添加输入延迟及开头匹配功能

我来帮你把这段jQuery代码改造成符合你需求的纯JavaScript版本，完美解决你提到的三个核心问题：延迟触发匹配、最小输入长度限制，以及从字符串开头匹配的过滤逻辑。

核心需求的实现思路 #

• 延迟触发匹配：通过防抖（Debounce）机制，用setTimeout延迟执行过滤逻辑，同时每次按键时清除之前的定时器，避免输入过程中频繁触发。
• 仅当输入≥3字符时触发：在执行过滤前先判断输入内容的长度，只有满足条件才继续处理。
• 开头匹配替代indexOf：使用原生字符串方法startsWith()，配合大小写转换实现不区分大小写的开头匹配，精准过滤无关结果。

改造后的纯JavaScript代码 #

// 声明全局变量存储定时器ID，用于防抖处理
let searchDebounceTimeout;

inputString.onkeyup = function() {
    // 清除上一次的定时器，避免重复触发过滤
    clearTimeout(searchDebounceTimeout);
    
    // 获取输入值并去除首尾空格，转成大写实现大小写不敏感匹配
    const filterText = this.value.trim().toUpperCase();
    
    // 设置延迟触发时间（这里设为300毫秒，可根据需求调整）
    searchDebounceTimeout = setTimeout(() => {
        // 仅当输入字符数≥3时执行过滤逻辑
        if (filterText.length >= 3) {
            // 遍历所有学生列表项
            for (let i = 0; i < eachStudent.length; i++) {
                // 获取当前项的姓名文本并转大写
                const studentName = eachStudent[i].querySelector('h3').textContent.toUpperCase();
                
                // 判断姓名是否以输入的过滤文本开头
                if (studentName.startsWith(filterText)) {
                    eachStudent[i].style.display = 'list-item';
                } else {
                    eachStudent[i].style.display = 'none';
                }
            }
        } else {
            // 输入字符不足3个时，显示所有列表项（可根据需求改为隐藏）
            for (let i = 0; i < eachStudent.length; i++) {
                eachStudent[i].style.display = 'list-item';
            }
        }
    }, 300);
};

代码关键点说明 #

• 防抖机制：clearTimeout(searchDebounceTimeout)确保用户在连续输入时，只有停止输入超过300毫秒才会执行过滤，提升性能和用户体验。
• 原生JS替代jQuery：用querySelector替代jQuery的find()，textContent替代text()，完全脱离jQuery依赖，更轻量。
• 大小写不敏感匹配：将输入值和姓名都转换为大写（或小写）后再比较，避免因大小写差异导致的匹配失败。
• 灵活调整：延迟时间（300毫秒）和输入最小长度（3）都可以根据实际需求修改，输入不足长度时的显示逻辑也可自定义。

内容的提问来源于stack exchange，提问作者user3541631