Use jQuery Sew instead.

jQuery UI Inlined Autocomplete

This widget lets you search for users to @mention in your posts. It works very much like Facebook and Google+ in that it supports users with spaces in their name. It writes to a hidden field with the user ID's formatted in this way: @[12345] while showing @username in the input box. You can save the encoded string for easier parsing at display time.

This is a fork of @Hawkers, Triggered Autocomplete plugin.

Only difference is, the autocomplete is inlined with text, instead of at the bottom of the text container.

How to Use

$('#inputbox').inlinedAutocomplete({ 	hidden: '#hidden_inputbox, 	source: "/search.php", 	trigger: "@"  }); 

You can use a predefined array or json as a source. Example json result:


To use the hidden field without an ajax call you need to pass an associative array:

$('#inputbox').inlinedAutocomplete({ 	hidden: '#hidden_inputbox, 	source: new Array({ "value": "1234", "label": 'Geech'}, {"value": "5312", "label": "Marf"}) }); 

If you want editable posts, you need to pass an id_map as an attr tag of the input box. This is also json encoded and is simply an associative array of the included user_id => username pairs in the existing post. This is so when you change the post the original @mentions are preserved in their @[12345] format.


Be sure that you have node.js installed.

And then, you'd also need a copy of CoffeeScript running. Just install it like so.

# May require `sudo` $ npm install -g coffee-script 

After that, be sure to call the following command to install the dependencies that will allow you to test the plugin.

$ ./dependencies 

And then, to run the test server, call the following command*.

$ coffee 

You should now be able to navigate to http://localhost:3000/test* to see the plugin in action.

*If you have port 3000 occupied, you can also run the server on another port, by passing in your alternate port number like so coffee 4000.