实现select下拉带模糊搜索

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量1.8k 收藏 2
点赞数
分类专栏： 前端 js select模糊搜索 文章标签： javascript jquery css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013535022/article/details/109596702
版权
前端 同时被 3 个专栏收录
3 篇文章 0 订阅
订阅专栏
js
1 篇文章 0 订阅
订阅专栏
select模糊搜索
1 篇文章 0 订阅
订阅专栏

整体效果图
在这里插入图片描述
模糊搜索效果图
在这里插入图片描述


```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带模糊查询的select下拉框</title>
    <link rel="stylesheet" href="css/combo.select.css">
    <script type="text/javascript" src="https://www.jq22.com/js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.combo.select.js"></script>
    <script type="text/javascript">
        $(function() {// 初始化内容
            $("#select").comboSelect();
        }); 
    </script>
</head>

<body>
    <select id="select">
        <option value="0">请选择</option>
        <option value="9">丘比特</option>
        <option value="12">香车美女</option>
        <option value="16">钻戒</option>
        <option value="23">幸福摩天轮</option>
        <option value="35">蓝色妖姬</option>
        <option value="52">强吻</option>
        <option value="67">扔鸡蛋</option>
        <option value="135">烛光晚餐</option>
        <option value="137">蜜桃</option>
        <option value="138">爱情烟花</option>
        <option value="139">蜜粽金币</option>
        <option value="140">香蕉</option>
        <option value="143">药不能停</option>
        <option value="149">金话筒</option>
    </select>
</body>

</html>

``
demo下载地址: https://download.csdn.net/download/u013535022/13101850.

ゞοo
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
select标签添加模糊搜索功能 select2插件的简单使用
Lance的博客
05-16 2499
前言 select标签下拉列表里的数据条数太多，不好找，希望能对其添加一个模糊搜索的功能，找到了一个select2的插件解决了问题。现在简单整理其使用 select2：基于jQuery的下拉列表美化插件 官 网：http://select2.github.io/ github：https://github.com/select2/select2 （css和js文件在dist目录中） 简单使用步骤 引入jQuery.js <script src="{path}/jquery.min.js"&
前端jQuery和原生js 实现下拉框select模糊搜索功能总结
功能代码总结记录
05-11 3344
前端模糊查询，input框添加模糊搜索功能，原生select下拉列表添加搜索框实现模糊搜索，如：区划选择等场景
前台select框模糊查询方法
12-05
前台select框模糊查询方法 可以实现多选以及模糊匹配 可以调高查找效率
HTML下拉搜索，select筛选搜索
u014644574的博客
07-07 1万+
jQuery实现下拉搜索 点击输入框显示所有option option选项可滚动，已隐藏滚动条 输入框动态监听并筛选option <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉搜索</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.m
select下拉框模糊查询
LL548542的博客
03-18 131
});
html前端输入框模糊查询
spring_007_999的博客
07-01 1719
html前端输入框模糊查询
html下拉框有搜索功能 使用select2
小龙哒的博客
03-26 9469
js <link href="https://cdn.bootcss.com/select2/4.0.6-rc.1/css/select2.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/select2/4.0.6-rc.1/js/select2.js"></script> html...
html 下拉框模糊查询,【JavaScript】Select下拉列表 可输入的模糊查询
weixin_32955207的博客
06-07 394
这个是我用了三天的时间做出来，虽然在自己的项目中没有用到，但是感觉还是挺有成就感的，好东西就应该分享一下。。div style="position:relative";>学院：上海廊坊北京广州深圳window.onload = function() {var txtSearch = document.getElementById("txtSearch");var selType = docu...
select下拉带模糊搜索功能
04-26
附件下载可直接运行，特别好用
select 下拉框搜索实现模糊查询 的两种实现方法（h5标签实现、js实现）
热门推荐
weixin_43078114的博客
12-12 1万+
方法一（h5 datalist标签实现） 效果 不输入时： 输入1： 输入2： code <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <META content="fason,阿信" name=Author> <t...
html 搜索框输入提示，可输入可选择可模糊查询的select下拉，jquery实现操作（原生代码）
PrimaryColor
09-10 4445
根据网络其他大神的代码进行了一些更改，现在可以把输入框放置任何位置。 效果图： html： <span class="second"> <input type="text" name="makeupCo" id="makeupCo" class="makeinp" onfocus="setfocus(this)" oninput="setinput(this);" placeholder="请选择或输入" /> <sel
jquery实现select带模糊搜索下拉选择框
11-10
一个带下拉模糊搜索的select，替换下拉内容后即可直接使用，只需要把对应文件放到指定文件夹中引用即可
jQuery模糊搜索框下拉选择代码
07-31
jQuery模糊搜索框下拉选择代码是一款模糊搜索组件，点击搜索框文本下拉框提示效果。
select下拉模糊查询插件
12-23
带模糊查询的select下拉框，最近做了一个功能，在下拉框中有上千条选项，这种情况下肯定不能一个一个地去找，所以在下拉框中添加了一个模糊查询的功能，很多资料都有各种问题，下面是我实现的完整的实例
JS中Select下拉列表类(支持输入模糊查询)功能
10-20
主要介绍了JS中Select下拉列表类(支持输入模糊查询)功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 417
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1009
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue 实现级联选择器功能
清音的博客
04-22 522
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 306
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
小程序下拉选择框带模糊搜索怎么实现
06-10
实现带有模糊搜索的下拉选择框，可以使用以下步骤： 1. 创建一个输入框和下拉选择框组件，并将它们放置在一起。 2. 给输入框绑定一个 "keyup" 事件，当用户输入时，触发模糊搜索功能。 3. 在 "keyup" 事件处理程序中，获取输入框的值，并将其与下拉选择框中的所有选项进行比较。 4. 如果选项中包含输入框的值，则将该选项添加到一个新的数组中。 5. 将新数组中的选项更新到下拉选择框中，以显示符合条件的选项。 6. 当用户从下拉选择框中选择一个选项时，将所选的值更新到输入框中。 7. 最后，当用户清空输入框时，将下拉选择框中的所有选项显示出来。 具体实现过程可以参考以下代码： ```html <!-- 输入框和下拉选择框组件 --> <template> <div> <input type="text" v-model="searchText" @keyup="searchOptions" /> <select v-model="selectedOption"> <option v-for="(option, index) in filteredOptions" :key="index" :value="option">{{ option }}</option> </select> </div> </template> <script> export default { data() { return { options: ['apple', 'banana', 'orange', 'pear', 'peach'], // 所有选项 filteredOptions: [], // 模糊搜索后的选项 searchText: '', // 输入框的值 selectedOption: '', // 当前选择的选项 }; }, methods: { searchOptions() { // 获取输入框的值，并将其转为小写字母 const searchText = this.searchText.toLowerCase(); // 过滤符合条件的选项，并将它们添加到新数组中 this.filteredOptions = this.options.filter(option => option.toLowerCase().includes(searchText)); // 如果输入框中的值为空，则显示所有选项 if (!searchText) { this.filteredOptions = this.options; } }, }, }; </script> ``` 上述代码中，我们首先定义了一个包含所有选项的数组 `options`，以及一个空数组 `filteredOptions`。在 `searchOptions` 方法中，我们获取输入框的值，并将其转为小写字母，然后通过 `filter` 方法过滤符合条件的选项，并将它们添加到 `filteredOptions` 数组中。最后，我们在模板中使用 `v-for` 指令将 `filteredOptions` 数组中的选项渲染到下拉选择框中。同时，我们也将 `selectedOption` 属性绑定到下拉选择框上，以便在用户选择一个选项时，将其值更新到输入框中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值