jquery Sew : jQuery Inline Selector

What is it?

Inline option selection for HTML Text Inputs, auto-complete after a token. Try it live!

Usage

  var values = [{val: 'foo', meta: 'extended foo'}]; // meta is extended search field   $('textarea').sew({values: values}); // pass in the values

There're some required scripts that should be placed on the following order

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.caretposition.js"></script> <script type="text/javascript" src="jquery.sew.js"></script>

[NEW] You can now include a minified version

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.caretposition.js"></script> <script type="text/javascript" src="jquery.sew.min.js"></script>

Customization

• Elements classes are: -sew-list-container, -sew-list, -sew-list-item, -sew-list-item.selected
• You can customize the token (default is the @) by passing the {token: ':'}
• You can customize how elements are created by passing an elementFactory

  /**   * @param {jQuery} element the target element (LI)   * @param {*} e object containing the val and meta properties (from the input list)   */   function elementFactory(element, e) {     // append whatever you want to the target element     element.append({anyJQueryObject});   }

Release Notes

• [v0.0.0] initial commit

• [v0.0.2] {meta: } is now optional, on blur it shows a fadeOut animation, options now scroll, restored escape support, item shows pointer cursor, tab-autocompletion, no elements support.

• [v0.0.3] add new options {unique: (true|false)} for removing duplicates, spacing bugs.

• [v0.0.4] added support for content editable

• [v0.0.5] prevent repetition

Meta

Originally written by @leChanteaux (santiago at mural.ly) - maintained by Mural.ly Dev Team (dev at mural.ly)