将div内容复制到list.js搜索框后触发Enter事件失效求助

云上老周

2026-8-17

问题解决：点击Div自动填充List.js搜索框并触发搜索

问题背景

你尝试通过点击Div元素，将其内容填入基于List.js的搜索输入框，并自动触发搜索（模拟手动按Enter的效果），但手动输入时搜索正常，通过代码填充后无法触发相同的搜索效果，且已尝试多种网上方案。

原因分析

List.js的搜索功能默认监听的是输入框的input或change事件，而非keypress事件；你之前模拟的Enter键keypress事件，并不是List.js触发搜索的逻辑依赖，因此无法触发搜索。

解决方案

方案1：直接调用List.js实例的`search()`方法（推荐）

首先确保你已正确初始化List.js实例（替换成你项目中的实际参数）：

// 初始化List.js实例
var listOptions = {
  valueNames: ['item-name'] // 替换为你列表项的类名
};
var searchList = new List('list-container', listOptions); // 替换为你的列表容器ID

修改点击事件代码，设置输入框值后直接调用List.js的搜索方法：

$(document).ready(function(){
  $("#cat div").click(function(){
    var targetValue = $(this).text(); // 用text()避免HTML标签干扰搜索内容
    var searchInput = $('#pesq');
    
    searchInput.val(targetValue).focus();
    // 直接调用List.js的search方法执行搜索
    searchList.search(targetValue);
  });
});

方案2：模拟输入框的`input`事件（无法直接获取List实例时使用）

如果无法直接访问List.js实例，可通过模拟输入框的input事件触发搜索逻辑：

$(document).ready(function(){
  $("#cat div").click(function(){
    var targetValue = $(this).text();
    var searchInput = $('#pesq');
    
    searchInput.val(targetValue).focus();
    // 触发input事件，List.js会监听此事件执行搜索
    searchInput.trigger('input');
    // 额外触发change事件作为兜底兼容
    searchInput.trigger('change');
  });
});