带模糊查询的select下拉框

最近做了一个功能,在下拉框中有上千条选项,这种情况下肯定不能一个一个地去找,所以在下拉框中添加了一个模糊查询的功能,很多资料都有各种问题,下面是我实现的完整的实例:
下面是效果图:
这里写图片描述

可以看到文本是可以编辑的,可以在这里输入内容,下面是查询之后的效果:
这里写图片描述

所有带“灰色”字段的内容都显示出来了。

下面将实现过程,首先要导入js和css文件:

<link rel="stylesheet" href="assert/select/combo.select.css">
<script src="assert/select/jquery.combo.select.js"></script>

文件下载路径:

http://download.csdn.net/detail/cat_pp/9698493

*

收了大家一个积分,想给的就给个积分,没有也没关系,给我留言或者加qq:3393055725(荒),直接分享给大家

*

接下来就是前台和js部分了,先看HTML

<select id="select">
    <option value="0">请选择</option>
    <c:forEach items="${test}" var="test">
        <option value="${test.data}">${test.data }</option>
    </c:forEach>
</select>

用forEach标签输出option中的内容,这里使用request.setAttribute(“test”,dataSource)将dataSource实体类赋值给test,在前台通过EL表达式获取数据循环出来,效果和多个option标签是一样的。

接下来是js部分

$(function){
    $("#select").comboSelect();
}

这部分就不详细解释了,主要就是通过id获取到select标签,然后调用comboSelect方法就可以了。

很好用,希望能帮到大家

  • 2
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
实现一个 HTML 模糊查询下拉框可以使用 JavaScript 和 HTML 标准的 select 元素。具体实现步骤如下: 1. 创建一个 select 元素,并且为其添加一个 onchange 事件,当用户选择某个选项时触发该事件。 2. 在 JavaScript 中,定义一个数组,用于存储所有的选项值。可以通过 AJAX 技术从服务器端获取这些选项值。 3. 在 onchange 事件中,获取用户输入的值,并且遍历选项值数组,找到所有与用户输入值匹配的选项值。 4. 动态创建 option 元素,并且将匹配的选项值添加到该元素中。 5. 将创建的 option 元素添加到 select 元素中,完成模糊查询下拉框的实现。 下面是一个简单的示例代码: HTML 代码: ``` <select id="mySelect" onchange="onChange()"> <option value="">请选择</option> </select> ``` JavaScript 代码: ``` // 定义选项值数组 var options = ["北京", "上海", "广州", "深圳", "杭州"]; // onchange 事件处理函数 function onChange() { var input = document.getElementById("mySelect").value; var select = document.getElementById("mySelect"); select.innerHTML = ""; select.appendChild(document.createElement("option")).text = "请选择"; for (var i = 0; i < options.length; i++) { if (options[i].indexOf(input) > -1) { var option = document.createElement("option"); option.text = options[i]; select.appendChild(option); } } } ``` 在这个示例中,当用户在 select 元素中输入某个值时,会动态地生成相应的选项,并且将其添加到 select 元素中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值