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

这几天有一个工作需求，就是kindeditor里可以有@功能，可以很方便的提示用户名(就像qq群里的@ people一样)。我在网上找到了一个叫做bootstrap-advise的插件，但是它不能满足我的需求，所以我决定对它进行改进，主要如下：

1.@输入内容，可以匹配多个属性值。

2.选择列表值后，分块插入kindeditor(便于删除和区分文本)。

3.纠正输入偶数关键字@的功能故障。

序

一开始我用的是https://github.com/lodev09/bootstrap-suggest,可以达到以下效果。

但是我发现了几个问题：

1.只有单个匹配(可能有拼音或中文需要匹配)。

2.偶数的@函数将失败。

3.选择值后，它只是一个简单的文本(没有qq那样的屏蔽效果)。

jquery-kind editor-建议

由于不想反复构建轮子，所以决定对插件进行调整，以满足自己的需求。有几个要点需要说明。

1.startoffset的值错误。

如果使用KindEditor的insertHTML，下次会导致startOffset的值出错。当原插件获取到光标位置(上，左)时，需要插入一个span来获取，获取后删除，但此时，下一个编辑器. cmd . range . startoffset；犯错误。

所以我修改了插入方法：

var doc=editor.cmd.range.doc，range=editor.cmd.range，frag=doc . createdocumentfragment()；kind editor(' @ span id=' input-text area-caret-position-mirror-span '。/span '，文档)。每个(function(){ frag . appendchild(this)；});range . delete contents()；range . insert node(frag)；range . collapse(false)；PS:在170行。

2.替换选定的值

删除@(包括@)后的输入，然后插入完整的标签(选择值)，并确保光标位置正确。

var dType=！El . cmd . range . start container . data？数据“:”innerHTML；//最关键的值是vars val=El . cmd . range . start container[dtype]；var LaT=SVal . LastIndex of(this . key)；El . cmd . range . start container[DType]=SVal . substring(0，LaT)；El . insert HTMl(' span content editable=' false ' ' this . key item . value '/span ' ' span id=' input-text area-caret-position-mirror-span '。/span’)；var span=El . edit . doc . getelementbyid(' input-text area-caret-position-mirror-span ')；var range=El . edit . doc . create range()；range . SelectNodeContents(span)；range . collapse(false)；var sel=El . edit . win . GetSelection()；sel . removeallranges()；sel.addRange(范围)；//hack:更正下一个startoffsetspan。parentnode。remove child(span)；PS:在第442行。

修正效应

内容是富文本输入区，以及插入的块文本。

摘要

虽然是基于别人的插件，但是我花了很多心思在修复问题上。之前一直发现没有一个插件能准确针对kindeditord @的功能，所以就自己做了。

我把源代码放在Github上，如果需要我可以去：https://github.com/codingforme/jquery-kindeditor-suggest

以上是边肖介绍的jQuery弹出下拉列表插件(实现kindeditor的@功能)，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！