Best AutoSuggestion jQuery Plugin

Namanya AutoSuggest jQuery Plugin. Plugin ini sangat powerful, sama seperti yang digunakan pada aplikasi-aplikasi web yang bagus dan profesional. Bahkan plugin ini terkesan lebih bagus, menurut saya. Pertama karena kecil, yang tentu saja ringan untuk di-load melalui website kita. Dan kedua, mudah implementasinya. Ketiga, plugin ini sudah diujicobakan pada IE7 & IE8, Firefox, Safari, Opera, serta Chrome dan semuanya bekerja dengan baik.

Berikut ini cara implementasinya, yang mudah sekali, saya ambil dari websitenya langsung.

Obviously you need to make sure you have the latest jQuery library (at least 1.3) already loaded in your page. After that it’s really simple, just add the following code to your page (make sure to wrap your code in jQuery’s ready function):

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

The above line of code will apply AutoSuggest to all text type input elements on the page. Each one will be using the same set of Data. If you want to have multiple AutoSuggest fields on your page that use different sets of Data, make sure you select them separately. Like this:

$(function(){
$("div.someClass input").autoSuggest(data);
$("#someID input").autoSuggest(other_data);
});

Doing the above will allow you to pass in different options and different Data sets.

Below is an example of using AutoSuggest with a Data Object and other various options:

var data = {items: [
 {value: "21", name: "Mick Jagger"},
 {value: "43", name: "Johnny Storm"},
 {value: "46", name: "Richard Hatch"},
 {value: "54", name: "Kelly Slater"},
 {value: "55", name: "Rudy Hamilton"},
 {value: "79", name: "Michael Jordan"}
]};
$("input[type=text]").autoSuggest(data.items, 
 {selectedItemProp: "name", searchObjProps: "name"});

Below is an example using a URL to gather the Data Object and other various options:

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

Please not that you MUST have an object property of “value” for each data item. (This is now configureable with the selectedValuesProp option). The “value” property will be stored (comma separated) in the hidden input field when chosen from the “suggestion” dropdown list. You can see an example of the “value” property being set for each data item in the example above. Typically the “value” property would contain the ID of the item, so you can send a list of “chosen” IDs to your server.

Below is an example of how to process the data sent via AJAX to your server in PHP:

<?
$input = $_GET["q"];
$data = array();
// query your DataBase here looking for a match to $input
$query = mysql_query("SELECT * FROM my_table WHERE my_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);
?>
Selamat mencoba…
Pos ini dipublikasikan di Developer dan tag . Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s