jquery-editable-select使用 绑定动态数据筛选,并获取value和txt

jquery-editable-select:一个简单的jQuery插件,可将选择转换为带有建议的文本字段 jQuery可编辑选择 jQuery Editable Select是一个jQuery插件,可将选择转换为输入字段,根据输入的字符实时显示单个元素。 当javascript不可用时,它会按比例缩小到实际的选择列表。 演示版 在此处查看演示: : 安装 从 , 或获取jQuery Editable Select: npm install jquery-editable-select bower install jquery-editable-select git clone https://github.com/indrimuska/jquery-editable-select.git 在@ types / jquery-editable-select包中提供了键入: npm install --save-dev @types/jquery-editable-selec 立即下载

github地址: https://github.com/indrimuska/jquery-editable-select

这个插件的原理是把多选框转化为input 并把项列为ul>li的形式

<select id="i_CustomerId_ES" name="CustomerName"></select>



绑定动态数据,根据输入筛选 并获取value和txt

    1.初始化editable-select控件

  $('#i_CustomerId_ES').editableSelect().on('select.editable-select', function (e, dom) {
                //console.log(dom.val() + '' + dom.text());         
         });

    2.由于会解析成input 可以通过给input绑定keydown 或 input时间来监控输入的目的:

   $('#i_CustomerId_ES).on('input', function (e) {
                bindSc($(this).val()); //调用获取数据的方法
            });
    3.绑定数据:
  var bindSc = function (value) {
            var search = value;
            $.get('...', { search: search }, function (result) {
                $('#i_CustomerId_ES').editableSelect('clear');//清空现有数据
                $.each(result, function (i, t) {
                    $('#i_CustomerId_ES').editableSelect('add', function () {
                        $(this).val(t.Id);
                        $(this).text(t.Name);
                    });//调用add方法 通过函数的方式绑定上val和txt
                })
            })

以上。


重点方法:

.on('select.editable-select', function (e, dom) {}) //选择后触发
.editableSelect('clear');//清空现有数据
.editableSelect('add', function () {
                        $(this).val(t.Id);
                        $(this).text(t.Name);
                    });//add绑定添加上value txt

输入之后会出现数据框消失的情况,只需将源码中的if (this.$list.find('li').length == hiddens) this.hide();注释掉就好


歪枣网股票数据下载接口汇总一 歪枣网上下载接口动态信息如下: 接口名称:A股列表,接口描述:沪深京A股基本信息,接口地址:/doc/getStockHSABaseInfo?code=all&fields=code,name,stype,hsgt,bk,roe,zgb,ltgb&export=0&token= 请求参数描述: 参数名:code,参数描述:股票代码,支持批量查询,用逗号分隔,每次最多30个;若为all,则表示全部,即可获取任意一天内的所有数据。 请求参数描述: 参数名:fields,参数描述:数据字段 阅读详情

相关推荐

K8S证书过期解决办法之替换证书

k8s证书过期解决方案之替换证书

q_hsolucky的博客 1万+

jquery-editable-select 可编辑输入的下拉选择框

<select id="editSelect"></select> <button class="btn" id="submitBtn">Default </button> <script> let dataList = [ 'a', 'ab', 'b', 'bc', 'dd', ...

梦想小镇 3955

双臂复合机器人眼在手外标定实战:从原理到D435标定流程详解

本文详细解析了双臂复合机器人中眼在手外标定的核心原理与实战流程。通过阐述坐标系转换与AX=XB方程,重点介绍了使用Intel RealSense D435相机进行标定的完整步骤,包括环境搭建、数据采集、计算与验证,并提供了关键的避坑指南,帮助工程师实现相机与机械臂基座间的精确坐标对齐。

weixin_29100927的博客 448

生产者与消费者模型

生产者-消费者模式是一个经典的多线程设计模式。 在生产者-消费者模式中,通常有两类线程,即若干个生产者和消费者线程。 生产者线程负责提交用户请求 消费者线程负责处理生产者提交的任务。 内存缓冲区 缓存生产者提交的任务或数据,供消费者使用。 开发需要解决的问题: 生产者线程与消费者线程对内存缓冲区的操作的线程安全问题。 虚假唤醒。 测试: /** * 生产者与消费者案例。 * @author */ public class TestProductorAndConsumer { public

zxg的博客 2308

小程序 video 控制器外观调整_Kessil 360X Tuna Sun无线控制器使用分享

之前分享了Kessil 360X Tuna Sun开箱记录,时间关系,没来得及使用WiFi Dongle无线控制器。昨晚抽空实操了一下,做个操作记录,希望对大家有参考Kessil无线模块操作指南官方视频英文教程配中文字幕,非常详尽语速较快,重点位置可以暂停操作点击边框调出视频工具条1、拆包取控制器,保存二维码Kessil WiFi Dongle包装打开包装就能看到Kessil无线控制模...

weixin_39759060的博客 4733

CST仿真实例001:圆极化平板天线仿真

CST仿真实例001:圆极化平板天线仿真实例

weixin_47638568的博客 1万+

可编辑的下拉菜单 jquery-editable-select

【代码】可编辑的下拉菜单 jquery-editable-select。

jxyk2007的专栏 880

《AgentScope-Java 深入浅出教程》第3章 消息系统(Message)

在 AgentScope 中,消息(Msg)是最核心的数据结构。│ 消息的作用 ││ ││ │ 用户输入 │ ────────────┐ ││ ▼ ││ │智能体通信│ ◄────► │ 消息对象 │ ◄────► │ LLM API │ ││ ▲ ││ │ ││ │ 历史存储 │ ────────────┘ ││ │用户输入:封装用户的问题和指令智能体输出:封装智能体的回复和工具调用智能体通信:在多智能体系统中传递信息LLM API 交互:转换为 LLM 可理解的格式历史存储。

步子哥的博客 228

jquery-editable-select设置可模糊查询的select

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入css样式表--> <link rel="stylesheet" href="jquery-editable-select.c...

bookhaha的博客 936

图像质量评估和点云质量评估

本文介绍了图像质量评估和点云质量评估的基本概念和常用方法,并提供了相应的源代码示例。图像质量评估关注图像的视觉质量,常用的评估指标包括均方误差(MSE)、结构相似性指标(SSIM)和峰值信噪比(PSNR)。点云质量评估关注点云数据的准确性和完整性,常用的评估方法包括点云配准质量评估、稠密重建质量评估和离群点检测质量评估。在计算机视觉和计算机图形学领域中,图像质量评估和点云质量评估是两个重要的任务。图像质量评估旨在量化图像的视觉质量,而点云质量评估则关注于点云数据的准确性和完整性。

XsupDatabase的博客 990

UG\NX二次开发 分割曲线

分割曲线没有ufun函数?那就换一种思路实现。

王牌飞行员_里海的博客 1144

jquery-editable-select使用 绑定动态数据

参考博文https://blog.youkuaiyun.com/CommandBaby/article/details/80622931 只是在动态添加value 和text的时候有变动,对应新的插件,楼主写的$(this).val(t.Id);对li标签添加不了value,我查看了一下源码,使用的以下方法可行: $(this).attr('value', t.Id) 附上整个配置过程: 引用js ...

huihui_54321的专栏 1996

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

select下拉框插件jquery.editable-select的用法以及注意事项

项目中考虑到下拉框从后台动态获取的值比较多,用户体验不是很好,就考虑到下拉框既可以下拉选择,也可以手动填写,从网上查了一下,jquery.editable-select这个插件还挺符合就拿来用了。 这里先说一下大概用法(这里也是网上找的): afgef adfge ads

Only寒暄 7974

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

jquery jeditable 多选插件 (checkbox or select)

  实例: &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery.jeditable.mini.js"&gt;&lt;/script&gt; &lt;!-- mul

Just Code 394

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

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

jquery.editable-select 一、简介:        由于项目业务需求:需要在用户输入时下拉匹配数据库中已有的数据源,或者手动输入即可; 二、插件的使用:        可直接去github(文件Demo地址)上面下载本人已上传的资源文件。 ...

qq_42773229的博客 2318

jQuery Editable Select 安装和配置指南

### 项目基础介绍 jQuery Editable Select 是一个简单易用的 jQuery 插件,它能够将标准的 HTML `` 元素转换为一个可编辑的文本输入框,并提供实时建议功能。当 JavaScript 不可用时,它会自动回退为一个标准的 `` 元素,确保在各种环境下都能正常工作。 ### 主要的编程语言 该项目主要使用 JavaScript 编写,...

gitblog_07555的博客 769

jQuery Editable Select可搜索下拉选项框

可搜索的下拉选项框。

不积跬步,无以至千里 711

【亲测免费】 jQuery Editable Select 使用教程

jQuery Editable Select 是一个 jQuery 插件,它将标准的 `` 元素转换为一个带有实时建议的文本输入字段。当 JavaScript 不可用时,它会回退到一个真正的选择列表。这个插件非常适合需要用户快速选择或输入特定选项的场景。 ## 项目快速启动 ### 安装 你可以通过 npm、bower 或 git 来安装 jQuery Editable Se...

gitblog_00420的博客 1172

动态添加jquery-editable-select插件下拉列表

项目场景: 在JSP页面中要用到带输入框的select组件,所以用到了jquery的jquery-editable-select插件 问题描述: 在使用jquery-editable-select插件时,需要动态的在select组件上添加option选项,但使用下面代码不会生效 $('#selectId').append("<option >实例<.option>"); 原因分析: 在浏览器页面看代码时发现jquery-editable-select插件会在初始化后把sel

qq_39100621的博客 944

jquery select选择器初始化指定值

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_34126557的博客 2699

VitePress 内置 Markdown 扩展完全指南:锚点、容器、代码高亮与文件包含的实战解析

VitePress 在标准 Markdown 之上内置了一整套开箱即用的扩展能力,覆盖标题锚点、内部/外部链接、Frontmatter、GitHub 风格表格与任务列表、脚注、Emoji、自定义容器、GitHub-flavored Alerts、Shiki 代码高亮(行高亮/聚焦/差异/错误标注/行号)、代码片段导入、代码组、Markdown 文件包含、数学公式与图片懒加载等二十余项能力。本文以官

gitblog_00089的博客 746

jquery-editable-select设置显示默认选项

在可编辑的select下拉框控件这篇博文中使用到了jquery-editable-select控件,这个控件既可以手动输入也可以用于下拉选择,类似MFC中的combobx控件,在特定场景下非常方便。 下面将分享“如何解决页面加载时设置默认的显示选项”。 HTML结构 下面是html代码...

weixin_30548917的博客 733

jquery.editable-select 可编辑下拉框之获取select值和input值

使用jquery.editable-select可以实现可编辑下拉框的功能,但需要先导入jquery.js,jquery.editable-select.css,jquery.editable-select.js这三个文件。 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 &...

weixin_30278311的博客 1453

select下拉框插件jquery.editable-select

项目中有个需求,下拉框既可以下拉选择,也可以手动填写 html代码 1 <span>数据来源</span> 2 <select class="source id="noMean">3 <option value="0">人工导入</option>...

437

editable select 可输入可实时查询的下拉选

1.jsp页面用法(可以下载该文件到本地,然后在自己页面直接引入):(1)页面引入<script src="//code.jquery.com/jquery-1.12.4.min.js"></script> <script src="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select

记录程序的点点滴滴! 5909
上一篇: Visual Studio远程调试
下一篇: MySql执行语句常见问题(Error Code: 1175、1292)
DayDay_Code
博客等级 码龄14年 31粉丝 47原创
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值