Facelist

Facelist

Facelist 2.0 available now. Follow @iantearle for details of how you can get it. The current demo is available in the official Facelist Book as well as the documentation.

Built for the sole purpose of providing a Facebook style autosearch.

The simplest implementation to get Facelist working is by adding the code below. This will apply a Facelist control to every input on your page.

  $(function(){  $("input[type=text]").faceList(data);  });

To enable multiple Facelists containing different data make your selections with different calls:

 $(function(){  $("div.anclass input").faceList(data); $("#anid input").faceList(other_data);  });

You can define a URI for the data:

 $("input[type=text]").faceList("http://yoursite.com/path/to/script",   {minChars: 3, matchCase: true}); 

An example of the PHP used for an AJAX call to a script on your site can be made like so:

$input = $_GET["q"]; $data = array(); $query = mysql_query("SELECT * FROM table WHERE field LIKE '%$input%'");   while ($row = mysql_fetch_assoc($query)) {    $json = array(); $json['value'] = $row['id']; $json['name'] = $row['username']; $json['image'] = $row['user_photo']; $data[] = $json; } header("Content-type: application/json"); echo json_encode($data);

January 27, 2009 Retweet