jQuery Autocomplete

Autocomplete using jQuery is quite easy. jQuery made this cumbersome work easy for programmers.

So what is needed for autocomplete feature in your page
  1. jquery.js
  2. jquery.autocomplete.js
  3. jquery.autocomplete.css file
Just include these three files in header. Ad the following script to your header

function showItem(row) {
return row[0];
}

$(document).ready(function() {
$("#category").autocomplete(
 "getcategory.php",
 {
  minChars:1,
  max: 200,
  scrollHeight: 180,
  formatItem:showItem
 }
);
});
Let us depicts about the above code segments. Here #category means the category id on which you want autocomplete feature. and "getcategory.php" is the server side file which will provide result for autocomplete.

Now let us discuss about the parameters.
minChars: minimum character in the input to call autocomplete
max: maximum item in the list. No more items exceeding this value will not be displayed. Its default value is 10
scrollHeight: this is actually list height. If result is large scroll is needed.
formatItem: if you want to format data you can use this parameter.

Now how server will deliver data. Let us see the content of getcategory.php file

$categories = array('IT', 'Software', 'Semantec', 'Hardware', 'Intel',
 'AMD', 'Politics', 'Economics', 'Business', 'Travel',
 'Psychology', 'Medical', 'Sports');

$q = strtolower($_GET["q"]);
$results = array();
// search categories
foreach($categories as $cat)
{
 if( strpos(strtolower($cat), $q) === 0 )
  echo "$cat\n";
}


Now create a textbox with id "category". If you type you can view the autocomplete effect. It will display data matching to your input. If you want multiple item in your text box just set "multiple: true" in the autocomplete parameter list. By deafult data is separated by comma. But you can change using multipleSeparator parameter.

View the Demo.

Comments

rosanny said…
hallo

what if i use struts2 and JSP?
have u tried?
Khaer said…
Sorry for late. I did not try using struts2 and jsp. Do you have any idea using struts2 and jsp?
rosanny said…
i've posted it on my blog.
see this
Unknown said…
đồng tâm
game mu
cho thuê nhà trọ
cho thuê phòng trọ
nhac san cuc manh
số điện thoại tư vấn pháp luật miễn phí
văn phòng luật
tổng đài tư vấn pháp luật
dịch vụ thành lập công ty trọn gói

“Ta cũng muốn ta cũng muốn!" Một thiếu nữ hơn mười hai tuổi mắt tỏa sáng cầm chặt vạt áo một người trung niên bên mình: "Ta cũng muốn cá lớn kéo thuyền..."
Nước sở dĩ trói buộc thân kiếm chính là bởi vì kiếm ở trong nước lại muốn phá hủy cân bằng của nước.

Người sở dĩ luôn cảm thấy trói buộc, chính là thân ở trong thiên địa lại muốn đánh phá gông cùm, xiềng xích Thiên địa, cho nên thiên đạo nhất định lâm vào buộc!

Hướng nhỏ mà nói, chính là lực lượng dòng nước cùng kiếm đối kháng, nhưng nếu là hướng lớn nói, đây là đạo lý thiên đạo! Quy tắc thiên đạo!

Người thân ở đáy nước thời điểm không chịu được xông ra mặt nước, nhưng khác nào là đột phá dòng nước thiên đạo này!

Nhưng người chi cần thân ở trong đó, nhất định phải chịu trói buộc của nó!

Sở Dương lẳng lặng cảm ngộ, liên tục nửa tháng, hắn hầu như là không biết mệt mỏi ở trong nước cùng trên bờ xuyên qua , qua lại. Không biết mệt mỏi xuất kiếm, thế hội, thu kim lĩnh ngộ.

Thời gian từng chút từng chút đi qua.

Bên trong Cửu kiếp không gian, kiếm linh thở dài thật sâu, lại vui mừng thở phào nhẹ nhõm. Hắn tận mắt nhìn thấy Sở Dương trông đột nhiên lâm vào ngộ đạo, sau đó lại bị ngộ đạo hoàn toàn trói buộc, suýt nữa tâm trí bị lạc, ngủ

Popular posts from this blog

Oracle Export, Import using sqlplus

Custom Request Processor in Struts

Preventing Duplicate Form Submission in Struts using TOKEN