Open Source Address: https://github.com/yuezhongxin/Mention.js
Plug-in effect: Similar to @user list effect on Weibo or GitHub.
This is a two-time development of the plug-in, took a few days, the Mention.js (author Jakiestfu) made some improvements, mainly in the following aspects:
- Add search custom: Can be based on the input @user-key, the background dynamic query.
- Add textarea Tracking Focus: the effect is that the user list is tracked in the textarea input focus, not at the bottom of the textarea, mainly using the Textarea-caret-position.js plug-in (used to get textarea current focus coordinates).
- Add under option: whether to track focus, false by default.
- Perfect Matcher: The main is to determine whether to search, such as textarea input content, how to make a judgment query and display the results list.
- Add simple: Remove some of the bootstrap style effects, simplify.
- Add a space after the select value is increased.
- Increase fixed option: fixed list, default = False.
- Several improvements.
Here are four configurations and effects shows.
1. Default effect
Configuration code:
<Body><TextAreaId="Full" ></Textarea><LinkRel="Stylesheet"Type="Text/css"href=".. /css/mention.css "><ScriptSrc=".. /scripts/jquery-1.10.2.js "></Script><ScriptType=' Text/javascript 'Src=".. /scripts/mention-typeahead.js "></Script><ScriptType=' Text/javascript 'Src=".. /scripts/mention.js "></Script><ScriptType=' Text/javascript 'Src=".. /scripts/textarea-caret-position.js "></Script><ScriptType="Text/javascript" >$(Document). Ready ( function () {$ ( "#full"). Mention ({ Typeaheadopts: {Search:search}}); }); function search //here can write the background query code var data = [{ Name: ' Rob Dyrdek ', Image: ' http://placekitten.com/25/24 '}, { Name: ' Rick Bahner ', Image: ' HTTP://PLACEKITTEN.COM/25/23 '}]; console.log ( "key:" + key); return data;} </script></ BODY>
2. List following focus
Configuration code:
<Body><TextAreaId="Full" ></Textarea><LinkRel="Stylesheet"Type="Text/css"href=".. /css/mention.css "><ScriptSrc=".. /scripts/jquery-1.10.2.js "></Script><ScriptType=' Text/javascript 'Src=".. /scripts/mention-typeahead.js "></Script><ScriptType=' Text/javascript 'Src=".. /scripts/mention.js "></Script><ScriptType=' Text/javascript 'Src=".. /scripts/textarea-caret-position.js "></Script><ScriptType="Text/javascript" >$(Document). Ready (function () {$ ( "#full"). Mention ({typeaheadopts: {search:search, under: true}}); }); function search //here can write the background query code var data = [{ Name: ' Rob Dyrdek ', Image: ' http://placekitten.com/25/24 '}, { Name: ' Rick Bahner ', Image: ' HTTP://PLACEKITTEN.COM/25/23 '}]; console.log ( "key:" + key); return data;} </script></ BODY>
3. Simplified style
Configuration code:
<Body><TextAreaId="Full" ></Textarea><LinkRel="Stylesheet"Type="Text/css"href=".. /css/mention-simple.css "><ScriptSrc=".. /scripts/jquery-1.10.2.js "></Script><ScriptType=' Text/javascript 'Src=".. /scripts/mention-typeahead.js "></Script><ScriptType=' Text/javascript 'Src=".. /scripts/mention.js "></Script><ScriptType=' Text/javascript 'Src=".. /scripts/textarea-caret-position.js "></Script><ScriptType="Text/javascript" >$(Document). Ready (function () {$ ( "#full"). Mention ({typeaheadopts: {search:search, under: true}}); }); function search //here can write the background query code var data = [{ Name: ' Rob Dyrdek ', Image: ' http://placekitten.com/25/24 '}, { Name: ' Rick Bahner ', Image: ' HTTP://PLACEKITTEN.COM/25/23 '}]; console.log ( "key:" + key); return data;} </script></ BODY>
4. Fixed list
Configuration code:
<Body><TextAreaId="Full" ></Textarea><LinkRel="Stylesheet"Type="Text/css"href=".. /css/mention-simple.css "><ScriptSrc=".. /scripts/jquery-1.10.2.js "></Script><ScriptType=' Text/javascript 'Src=".. /scripts/mention-typeahead.js "></Script><ScriptType=' Text/javascript 'Src=".. /scripts/mention.js "></Script><ScriptType=' Text/javascript 'Src=".. /scripts/textarea-caret-position.js "></Script><ScriptType="Text/javascript" >$(Document). Ready (function() { $( "#full"). Mention ({typeaheadopts: {search:search, under: true , fixed: true}); }); function search //here can write the background query code var data = [{ Name: ' Rob Dyrdek ', Image: ' http://placekitten.com/25/24 '}, { Name: ' Rick Bahner ', Image: ' HTTP://PLACEKITTEN.COM/25/23 '}]; console.log ( "key:" + key); return data;} </script></ BODY>
Front-end plug-in @user