jQuery Facebook Autocomplete: Autocomplete text using AJAX like Facebook

Recommend this page to a friend!
  Info   View files Example   View files View files (11)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 48 All time: 504 This week: 4Up
Version License JavaScript version Categories
icfbautocomplete 2MIT/X Consortium ...1.0HTML, jQuery
Description Author

This is a jQuery plugin that can autocomplete text input using AJAX requests like Facebook.

It can listen to text typed in a text input and sends an AJAX request to a given URL of server side script that will return the completion possibilities. Server responses can be cached.

The plugin can call given callback functions when completed items are selected, removed or are already selected.

Picture of Igor Crevar
Name: Igor Crevar <contact>
Classes: 2 packages by
Country: Serbia Serbia
Age: 40
All time rank: 641 in Serbia Serbia
Week rank: 6 Up1 in Serbia Serbia Equal


fbautocomplete - Facebook like autocompleter

First of all, this plugin is based on autocompleter from jquery-ui, so jquery-ui is mandatory. Ofcourse, jquery is also required. I have tested plugin with 1.11.1 version of jquery and it seams to work ok :)

So... These javascripts are necessary to include in your html:

<script src="requirements/jquery.js" type="text/javascript"></script>
<script src="requirements/jquery-ui.min.js" type="text/javascript"></script>
<!-- actual fbautocomplete plugin -->
<script src="fbautocomplete/fbautocomplete.js" type="text/javascript"></script>

You also need to include jquery-ui css. fbautocomplete.css is not mandatory but you can you use it as base for your own style:

<link href="requirements/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link href="fbautocomplete/fbautocomplete.css" rel="stylesheet" type="text/css" />    

Html for autocomplete field should look something like (note that parent div IS mandatory! Actually, you can provide other container for input field, but if you forget to put container manually, then... unwanted things could happen ;)):

<div><input id="fbautocomplete_id" type="text" /></div>

Actual js is simple as:



Well, there are quite a few options for plugin. You can check some of the most used by looking at example (index.html) provided with plugin. I will provide detail list of them with explanation later. Most important one you probaly have to change is: - url: by default the value of this parameter is 'friends.php'. Plugin will call this url (somewhere on your server) for json data

$('#fbautocomplete_id').fbautocomplete({ 'url': '/path_somewhere_on_your_server' });

Server side

Actual server side is quite simple. In example provided, I used PHP. Text entered in input field is passed to server through term parameter of GET http request. The task of your page/servlet/whatever is to return json of desired items which satisfies somehow term condition. Format of outputed json should be something like:

[ { 'id': 1, 'title': 'First item' }, { 'id': 2, 'title': 'Second item' } ]

Custom properties of objects in array are also possible - try play with src! ;) For detailed example look at friends.php file

  Files folder image Files  
File Role Description
Files folder imagefbautocomplete (2 files)
Files folder imagerequirements (3 files, 1 directory)
Accessible without login Plain text file friends.php Data Auxiliary data
Accessible without login Plain text file index.html Example Documentation
Accessible without login Plain text file LICENSE Lic. Auxiliary data
Accessible without login Plain text file README.md Doc. Auxiliary data

  Files folder image Files  /  fbautocomplete  
File Role Description
  Accessible without login Plain text file fbautocomplete.css Data Auxiliary data
  Plain text file fbautocomplete.js Class Class source

  Files folder image Files  /  requirements  
File Role Description
Files folder imageimages (2 files)
  Accessible without login Plain text file jquery-ui.min.css Data Auxiliary data
  Accessible without login Plain text file jquery-ui.min.js Aux. Auxiliary script
  Accessible without login Plain text file jquery.js Aux. Auxiliary script

  Files folder image Files  /  requirements  /  images  
File Role Description
  Accessible without login Image file ui-bg_glass_100_fdf5ce_1x400.png Icon Icon image
  Accessible without login Image file ui-bg_highlight-so...00_eeeeee_1x100.png Icon Icon image

 Version Control Unique User Downloads Download Rankings  
This week:0
All time:504
This week:4Up