使用jQuery Select2 4.0.13时,无搜索结果自动清除搜索输入框
解决Select2无匹配结果时自动清除搜索框并重置下拉的问题
针对你使用的Select2 4.0.13版本,只需修改noResults回调函数,通过Select2实例方法清空搜索框并重置下拉选中状态,替换原alert代码即可:
$('.packageDropDown').select2({ dropdownCssClass: 'ui-widget ui-jqdialog zclass', width: 350, "language": { "noResults": function(searchedTerm) { // 获取当前Select2实例 const select2Instance = $(this).data('select2'); // 清空搜索输入框 select2Instance.$search.find('input').val(''); // 重置下拉选中状态(清空选中值并触发change事件同步界面) $(this).val(null).trigger('change'); // 可选:保留无匹配提示,取消注释即可 // return "无匹配结果"; } } });
代码说明:
select2Instance.$search.find('input'):精准定位Select2的搜索输入框,直接清空其内容$(this).val(null).trigger('change'):将原select元素的选中值设为null,触发change事件让Select2下拉回到初始无选中状态,同步更新界面显示- 若需要保留"No Results Found"类的提示文本,取消注释
return "无匹配结果";即可,也可自定义提示内容
修改后,当扫描的条码不在下拉列表中时,搜索框会自动清空,后续扫描有效条码时不会出现文本追加问题,下拉也会恢复到初始状态。
内容的提问来源于stack exchange,提问作者Steve Dyke
相关产品推荐
相关产品推荐

