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.
$('#inputbox').inlinedAutocomplete({
hidden: '#hidden_inputbox,
source: "/search.php",
trigger: "@"
});
You can use a predefined array or json as a source. Example json result:
[{"value":"1234","label":"Beef"},{"value":"98765","label":"Chicken"}]
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 server.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 server.coffee 4000
.