JQuery select支持模糊搜索

雨点打透心脏的1/2处 2024-03-17 13:45 27阅读 0赞

### 源代码 ###

主页

<select class="form-control" id="jobGroup" >
    	<#list JobGroupList as group>
    		<option value="${group.id}" <#if jobGroup==group.id>selected</#if> >${group.title}</option>
    	</#list>
    </select>

模态框

<div class="modal fade" id="addModal" tabindex="-1" role="dialog"  aria-hidden="true">
      ...
      <select class="form-control" id="jobGroupAdd" >
      	<#list JobGroupList as group>
      		<option value="${group.id}" <#if jobGroup==group.id>selected</#if> >${group.title}</option>
      	</#list>
      </select>
      ...
    </div>

### JS实现 ###

引入：select2

<link href="${request.contextPath}/static/plugins/select2/select2.min.css" rel="stylesheet" />
    <script src="${request.contextPath}/static/plugins/select2/select2.min.js"></script>

增加js，在页面加载完成时重写select

$('#jobGroup').select2();
    $('#jobGroupAdd').select2();

### 问题 ###

#### 搜索失效 ####

模态框select2下拉框不能搜索，使用模态框，一般都会自动带上一个属性， tabindex=“-1” ,因为这个属性的存在，导致select2的搜索框无法输入，去掉这个属性即可解决  
html中tabindex属性可以设置键盘中的TAB键在控件中的移动顺序，即焦点顺序

#### 宽度问题 ####

模态框中的select2下拉框很窄，增加宽度属性

$('#jobGroupAdd').select2({
        
      width: '100%'
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，27人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQuery select支持模糊搜索

源代码主页 <select class="form-control" id="jobGroup" > <list JobGroupList as g

雨点打透心脏的1/2处/ 2024年03月17日 13:45/ 0 赞/ 28 阅读

相关 jQuery插件-搜索下拉框bootstrap-select

我主要是使用 `bootstrap-select` 插件的搜索下拉框的功能先看看效果 ![在这里插入图片描述][20200729131355125.gif] 使用

朱雀/ 2023年03月02日 13:10/ 0 赞/ 16 阅读

相关 vue 本地搜索 js实现本地数据搜索 el-select 模糊搜索

封装好的[添加链接描述][Link 1] data goodsTypeList:[], goodsTypeListCopy :[], methods

本是古典何须时尚/ 2022年12月30日 14:56/ 0 赞/ 228 阅读

相关 js模糊搜索

js模糊搜索 \+ 实战 + 所谓模糊查询就是列表中的数据是否有符合关键字或某个字符,实现的操作方法主要有两种: 1.字符串方法indexOf：代码如下：

清疚/ 2022年12月15日 11:26/ 0 赞/ 232 阅读

相关简易模糊搜索

用于搜索商品名 <template> <div> <input type="text" placeholder="商品名称" v-mode

深碍√TFBOYSˉ_/ 2022年11月15日 11:43/ 0 赞/ 242 阅读

相关 es不建议模糊搜索_用es实现模糊搜索

![3c4218fd6b63080d1b83d9e4a328d03e.png][] ![8a087dda279c53e39c20c7c7886a8979.png][] ![

淡淡的烟草味﹌/ 2022年11月06日 02:58/ 0 赞/ 273 阅读

相关 Android 模糊搜索

在Android移动端开发过程中，列表展示是咱们经常使用的一种展现方式。这个时候就可能有如下情况出现了，比如说现在咱们列表里面的项还是相当可观的，而且咱们只想快速

女爷i/ 2022年05月26日 09:58/ 0 赞/ 376 阅读

相关 bootstrap-select前端bootstrap自带的模糊搜索功能

bootstrap-select前端bootstrap自带的模糊搜索功能引入的css和js <link href="/js/plugins/bootst

末蓝、/ 2022年03月14日 14:14/ 0 赞/ 737 阅读

相关 jQuery输入下拉模糊匹配插件之----jquery.editable-select

jquery.editable-select 一、简介：由于项目业务需求：需要在用户输入时下拉匹配数据库中已有的数据源，或者手动输入即可；二、插件的使

﹏ヽ暗。殇╰゛Y/ 2022年02月05日 07:21/ 0 赞/ 1240 阅读

相关 zTree 模糊搜索

/\\ \ 搜索树，高亮显示并展示【模糊匹配搜索条件的节点s】 \ @param treeId \ @param searchConditionId 搜索条件Id

古城微笑少年丶/ 2021年11月13日 21:56/ 0 赞/ 399 阅读