jquery pop-up Drop-down list plugin (implement Kindeditor @ feature) _jquery

These days there is a job demand, that is, in rich text input area (kindeditor) can have @ function, can easily prompt user name (like in QQ Group @ people). On the Internet to find a plug-in called Bootstrap-suggest, but can not meet my needs, so I decided to improve on the plug-in, mainly the following points:

1. @ content input, can match multiple attribute values.

2. When the list value is selected, it is inserted into the kindeditor (easy to delete, also advantageous to distinguish the text).

3. Correct input even keyword @ function failure problem.

Objective

In the beginning, I use Bootstrap-suggest (https://github.com/lodev09/bootstrap-suggest), this plug-in can achieve the following effects.

But I found a few questions:

1. Only a single match (there may be a need to match pinyin or Chinese).

2. Even-digit @ function will fail.

3. Select the value, just simple text (no QQ like that block effect).

Jquery-kindeditor-suggest

Because I do not want to repeat the wheel, so decided to make adjustments on the above plug-ins to meet my needs, there are several key areas need to be explained.

1. Startoffset value error problem.

If the Kindeditor inserthtml is used, the next Startoffset error will be evaluated. When the original plugin obtains the cursor position (top,left), it will need to insert a span to obtain, delete after the fetch, but this time next editor.cmd.range.startOffset;

So I changed the way I inserted it:

var doc = Editor.cmd.range.doc,
range = Editor.cmd.range,
frag = Doc.createdocumentfragment ();
Kindeditor (' @<span id= ' input-textarea-caret-position-mirror-span ' >.</span> ', doc). each (function () {
Frag.appendchild (this);
};
Range.deletecontents ();
Range.insertnode (Frag);
Range.collapse (FALSE);

PS: in 170 lines.

2. Replace selection value

Delete the entry after @ (including @) and insert a full label (select the value) and make sure the cursor is positioned correctly.

var Dtype =!! El.cmd.range.startContainer.data? "Data": "InnerHTML"; This value is the most critical
var sval = El.cmd.range.startcontainer[dtype];
var lAt = Sval.lastindexof (This.key);
El.cmd.range.startcontainer[dtype] = sval.substring (0, lAt);
El.inserthtml ("<span contenteditable= ' false ' >" +this.key+item.value+ ' </span> ' + ' <span id= ') Input-textarea-caret-position-mirror-span ">.</span>");
var span = El.edit.doc
. getElementById (' Input-textarea-caret-position-mirror-span '); 
var range = El.edit.doc.createRange ();
Range.selectnodecontents (span);
Range.collapse (false);
var sel = el.edit.win.getSelection ();
Sel.removeallranges ();
Sel.addrange (range); Hack: Fixed next startoffset
span.parentNode.removeChild (span);

PS: In 442 lines.

Effect after modification

Content is a rich text input area, inserted into a block of text.

Summarize

Although it is based on other people's plug-ins, but I also spent a lot of effort to fix the problem, has been found that there is no precision for the Kindeditord @ function of plug-ins, so I have to get the next.

I put the source code on the GitHub, there is a need to go down: https://github.com/codingforme/jquery-kindeditor-suggest

The above is a small set to introduce the jquery pop-up Drop-down list plugin (realize Kindeditor @ function), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!