jquery Popup drop-down list plugin (implements Kindeditor @ function)

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

1. The input of the @ content can match multiple attribute values.

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

3. Fixed input even keyword @ function failure problem.

Objective

In the beginning, I used Bootstrap-suggest (https://github.com/lodev09/bootstrap-suggest), this plugin 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. The @ function of the even digit is invalidated.

3. After selecting the value, it is just plain text (without the same block effect as QQ).

Jquery-kindeditor-suggest

As I did not want to repeat the wheel, I decided to make adjustments on the top of the plug-in to meet my needs, and there are several key areas to be explained.

1. Startoffset value error problem.

If Kindeditor's inserthtml is used, the next Startoffset value error is caused. When the original plug-in Gets the cursor position (top,left), it will need to insert a span to fetch, delete after fetch, but this time the next editor.cmd.range.startOffset;

So I changed the way I inserted it:

var doc = Editor.cmd.range.doc,     = Editor.cmd.range,     =  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 rows.

2. Replace selection values

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

varDType =!! El.cmd.range.startContainer.data? "Data": "InnerHTML";//This value is the most criticalvarSval =El.cmd.range.startcontainer[dtype];varLAt = Sval.lastindexof ( This. Key); El.cmd.range.startcontainer[dtype]= sval.substring (0, lAt); El.inserthtml ("<span contenteditable= ' false ' >" + This. key+item.value+ ' &nbsp;</span> ' + ' <span id= "Input-textarea-caret-position-mirror-span" >.</ Span> ');varspan =El.edit.doc. getElementById (' Input-textarea-caret-position-mirror-span '); varRange =El.edit.doc.createRange (); range.selectnodecontents (span); Range.collapse (false);varSEL =el.edit.win.getSelection (); Sel.removeallranges (); Sel.addrange (range);//hack: Fix the next startoffsetSpan.parentNode.removeChild (span);

PS: in 442 rows.

Post-modification effects

The content is a rich text input area, inserted into the block text.

Summarize

Although it is based on other people's plug-ins, but I also spent a lot of effort to fix the problem, I have always found that there is no accurate for the Kindeditord @ function plug-in, so I did it myself.

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

This article for the original article, reproduced please retain the original source, convenient traceability, if there is the wrong place, thank you correct.

This address: http://www.cnblogs.com/lovesong/p/5769008.html

jquery Popup drop-down list plugin (implements Kindeditor @ function)