Auto complete friends list like Facebook or Google using @ input with jQuery

Going towards web2.0, we should think about social networking activites with in our site, and make user experience easier. We should also keep in our mind,  How good we are making the sites user friendly which makes user more involved in the site.

Below is one of the idea to increase the usability of the site. When you create your site similar to Facebook or Google, you may also want to implement auto complete friends list while typing @ in the input box.

Ajax Autocomplete for jQuery allows you to easily create autocomplete/autosuggest boxes for text input fields. Built with focus on performance – results for every query are cached and pulled from local cache for the same repeating query. If there are no results for particular query it stops sending requests to the server for other queries with the same root.

Here’s Auto complete friends name in facebook and Google +. Configurable features in mentionsInput plugin,

onDataRequest function(mode, query, callback) This function is a callback function which is used to provide data for the autocomplete. When a search starts this function is called with following arguments: ‘search’, the query (what’s been typed), and a callback function which needs to be called inside onDataRequest with a data collection to be searched on as a first argument.
triggerChar @ Trigger character which triggers the mentions search, when the character has been typed into the mentions input field.
minChars 2 The minimum amount of characters after the trigger character necessary to perform a search.
showAvatars true | false Toggles whether or not items within the autocomplete-dropdown will be rendered with an icon/avatar.
elastic true | false Toggles whether or not the mentions component will auto-grow when new lines are created (elastic behaviour).
classes object Object which contains classes used in the layout as key/value pairs.
templates object Object which contains templates used to render the layout as key/value pairs.

 

Implementation Steps are as follows,

Step 1 : HTML markup

Step 2 : jQuery plugin initialization

Step 3 : Output is ready

Requirement :- jQuery Framework
License :- MIT License
Demo :-  http://podio.github.com/jquery-mentions-input/

Leave a Reply