位置: 编程技术 - 正文

jQuery弹出下拉列表插件(实现kindeditor的@功能)(jquery实现下拉框)

编辑:rootadmin

推荐整理分享jQuery弹出下拉列表插件(实现kindeditor的@功能)(jquery实现下拉框),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery操作下拉框,jquery 下拉框滚动加载数据,jquery实现下拉菜单,jquery怎么给下拉框赋值,jquery下拉框默认选中,jquery怎么给下拉框赋值,jquery怎么给下拉框赋值,jquery下拉列表,内容如对您有帮助,希望把文章链接给更多的朋友!

这几天有个工作需求,就是在富文本输入区域(kindeditor)可以有@功能,能够容易提示用户名的(像在qq群组@人一样)。在网上找了一个叫bootstrap-suggest的插件,却不能满足我的需求,于是我决定在该插件上改良,主要是下面几点:

1. @内容的输入,能够匹配多个属性值。

2. 选中列表值后,是成块插入kindeditor的(方便删除,也利于区分文本)。

3. 修正输入偶数关键字@功能失效问题。

前言

在一开始,我用bootstrap-suggest( 只能单一匹配(可能存在需要匹配拼音或中文)。

2. 偶数位的@功能会失效。

3. 选取值后,只是简单文本(没有qq一样那种成块效果)。

jquery-kindeditor-suggest

由于我不想重复造轮子,于是决定在上面插件做调整,以满足我的需求,有几个关键地方需说明。

1. startOffset取值错误问题。

jQuery弹出下拉列表插件(实现kindeditor的@功能)(jquery实现下拉框)

如果使用了KindEditor的insertHTML,会导致下一次startOffset取值出错。原插件在获取光标位置(top,left)时,会需要插入一个span去获取,在获取完后删除,但是这时候下一次editor.cmd.range.startOffset;就出错。

于是我修改了插入的方式:

PS:在行。

2. 替换选择值

将@后面的输入内容删除(包含@),然后插入一个完整的标签(选择值),还要保证光标位置正确。

PS:在行。

修改后效果

内容是富文本输入区域,插入的成块文本。

总结

虽然是基于他人的插件,但我在修复问题上也花费了很多心思,之前一直发现没有精确针对kindeditord @功能的插件,所以我就自己弄了下。

我把源代码放在Github上了,有需要的可去下:

jQuery多文件异步上传带进度条实例代码 先给大家展示下效果图:///作者:柯锦///完成时间:..///多文件异步上传带进度条(function($){functionbytesToSize(bytes){if(bytes===0)return'0B';vark=,//orsiz

jquery过滤特殊字符',防sql注入的实现方法 今天写的代码给项目经理看了下,因为之前没有考虑sql注入的问题,然后在他测试我的code的时候,打了一个',然后我的程序就挂了!于是乎,我在网上

jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法 在上篇文章给大家介绍了jQueryEasyui使用(一)之可折叠面板的布局手风琴菜单先上代码:htmlxmlns="

标签: jquery实现下拉框

本文链接地址:https://www.jiuchutong.com/biancheng/384086.html 转载请保留说明!

上一篇:深入理解(function(){... })();(深入理解新发展理念心得体会3篇)

下一篇:jQuery多文件异步上传带进度条实例代码(jquery 异步加载)

  • 增值税开票软件怎么改开票人
  • 扣缴义务人和纳税人举例
  • 小规模的开专票怎么征税
  • 承销债券收取的承销费属于什么收入
  • 增值税发票遗失怎么操作
  • 盈余公积补亏为什么未分配利润增加
  • 固定资产折旧计算公式
  • 固定资产改造超过原值多少需要转固
  • 人员工资薪金所得税计算税款
  • 建筑材料专票抵扣
  • 捐赠和赞助业务的税务处理怎么做?
  • 承租方收到融资租赁款会计处理
  • 购买汽车怎么抵扣增值税
  • 某企业原材料采用实际成本核算,2019年6月
  • 附追索权的应收债权出售的会计处理
  • 技术变动成本是指
  • 个人开具工程款发票所得税怎么算
  • 核定征收的个人所得税怎么申报
  • 待转销项税额会计分录
  • 小规模纳税人可以开9%专票吗
  • 在外地的分公司可以独立核算开发票吗
  • 个人承包工程如何合理避税
  • 存货入库后的仓储费记录
  • 扣供应商的税点应该包括附加税吗
  • 现金日记账期初余额怎么登账
  • 手工做账月末怎么结转
  • 固定资产大修理支出计入什么科目
  • 查补以前年度收入怎么做会计分录
  • 诺曼底作战
  • mpd linux
  • phpstorm怎么用
  • 年终双薪是底薪吗
  • 非货币性资产交换和债务重组的区别
  • 企业管理的管理系统
  • 亚伯拉罕湖中的树,加拿大艾伯塔 (© Coolbiere/Getty Images)
  • h5 画图
  • continue命令必须与locate
  • groupinfo命令
  • 利息支出是利息费用嘛
  • 固定资产处置金额是什么意思
  • 包装物为什么是无菌的
  • mysql内连接查询使用汉语作为官方语言的所有国家
  • 制造费用哪些是变动的哪些是固定的
  • 购固定资产怎么入账
  • 资产负债表所有者权益排列顺序
  • 新冠捐款捐物新闻
  • 营改增企业可以转小规模吗
  • 运费不支付会怎么样
  • 未使用固定资产有哪些
  • 购房发票丢了怎么收房
  • 业务招待费纳税调整会计分录
  • 支付宝企业账户在哪里查看
  • 没有什么费用
  • 融资租赁具体操作流程
  • sql提取指定字符串
  • mysql主从复制作用
  • sql行变列有几种方法
  • windows禁止安装
  • unix含义
  • WINDOWS操作系统内置的GUEST
  • ubuntu 16:9
  • linux开启启动程序
  • window扫雷游戏在哪里
  • ubuntu14升级
  • 电脑跳出windows 许可
  • node_
  • python火车订票系统
  • 电脑完美平台
  • Eclipse运行快捷键
  • unity特色
  • jquery定位
  • python数据类型有什么用
  • javascript的核心组成部分
  • Python Sqlite3以字典形式返回查询结果的实现方法
  • python 字典的字典
  • python的argparse用法
  • 青岛胶州国际机场在哪个区
  • 服务合同需要交个人所得税嘛
  • 电子增值税专用发票和纸质增值税专用发票的区别
  • 经营工作会议
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设