เริ่มต้นใช้งาน jquery ui autocomplete อย่างง่าย
28 October 2010ตัวอย่างโค้ด พร้อมคำอธิบายต่อไปนี้ เป็นแนวทางการใช้งาน jQuery UI สำหรับสร้าง autocomplete โดยเรียกใช้ jQuery UI และ theme จาก google และเรียกใช้งาน jQuery จาก jquery.com
autocomplete ตามโค้ดตัวอย่างด้านล่าง เป็นการเรียกใช้งานจากค่าที่กำหนดตายตัวด้วย javascript เหมาะกับการใช้งานกับข้อมูลจำนวนไม่มากนัก หรือข้อมูลที่ไม่ต้องติดต่อกับฐานข้อมูล
ตัวอย่าง
คำอธิบายแสดงไว้ในโค้ดตัวอย่าง
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery ui autocomplete</title>
<style type="text/css">
body {
font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
font-size:12px;
}
</style>
<?php
$jquery_ui_v="1.8.5";
$theme=array(
"0"=>"base",
"1"=>"black-tie",
"2"=>"blitzer",
"3"=>"cupertino",
"4"=>"dark-hive",
"5"=>"dot-luv",
"6"=>"eggplant",
"7"=>"excite-bike",
"8"=>"flick",
"9"=>"hot-sneaks",
"10"=>"humanity",
"11"=>"le-frog",
"12"=>"mint-choc",
"13"=>"overcast",
"14"=>"pepper-grinder",
"15"=>"redmond",
"16"=>"smoothness",
"17"=>"south-street",
"18"=>"start",
"19"=>"sunny",
"20"=>"swanky-purse",
"21"=>"trontastic",
"22"=>"ui-darkness",
"23"=>"ui-lightness",
"24"=>"vader"
);
$jquery_ui_theme=$theme[11];
?>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/<?=$jquery_ui_v?>/themes/<?=$jquery_ui_theme?>/jquery-ui.css" />
<style>
/* css ส่วนของรายการที่แสดง */
.ui-autocomplete {
/* width:230px;*/
/* max-height:200px;
overflow:scroll;*/
}
.ui-button {
margin-left: -1px;
}
.ui-button-icon-only .ui-button-text {
padding: 0.35em;
}
/* css ส่วน textbox */
.ui-autocomplete-input {
font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
font-size:12px;
height:18px;
width:200px;
}
/* css ส่วนปุ่มคลิกเลือกแสดงรายการทั้งหมด*/
.myselect{
/* border:0px solid;*/
width:20px;
height:25px;
}
</style>
</head>
<body>
<label for="tags">Tags: </label>
<input id="tags" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
// กำหนดค่าแบบตายตัวสำหรับ ใช้งาน autocomplete
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"ทดสอบข้อความภาษาไทย"
];
$( "#tags" ).autocomplete({ // ใช้งาน autocomplete กับ input text id=tags
minLength: 0, // กำหนดค่าสำหรับค้นหาอย่างน้อยเป็น 0 สำหรับใช้กับปุ่ใแสดงทั้งหมด
source: availableTags, // กำหนดให้ใช้ค่าจากตัวแปรที่กำหนดข้างต้น
open:function(){ // เมื่อมีการแสดงรายการ autocomplete
var valInput=$(this).val(); // ดึงค่าจาก text box id=tags มาเก็บที่ตัวแปร
if(valInput!=""){ // ถ้าไม่ใช่ค่าว่าง
$(".ui-menu-item a").each(function(){ // วนลูปเรียกดูค่าทั้งหมดใน รายการ autocomplete
var matcher = new RegExp("("+valInput+")", "ig" ); // ตรวจสอบค่าที่ตรงกันในแต่ละรายการ กับคำค้นหา
var s=$(this).text();
var newText=s.replace(matcher, "<b>$1</b>"); // แทนค่าที่ตรงกันเป็นตัวหนา
$(this).html(newText); // แสดงรายการ autocomplete หลังจากปรับรูปแบบแล้ว
});
}
}
});
// สร้างปุ่ม สำหรับคลิกแสดงรายการทั้งหมด
$( "<button> </button>" )
.attr( "tabIndex", -1 ) // กำหนด tabindex .ให้กับปุ่ม
.attr( "title", "Show All Items" ) // กำหนด title เมื่อเลื่อนเมาส์มาอยู่เหนือปุ่ม
.addClass("myselect") // ให้ปุ่มนี้มี class=myselect
.insertAfter("#tags") // แทรกปุ่มนี้ต่อจาก input text id=tags
.button({ // กำหนด รูปแบบของปุ่ม
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false // กำหนดไม่แสดงข้อความใดๆ ในปุ่ม
})
.removeClass( "ui-corner-all" )
.addClass( "ui-corner-right ui-button-icon" )
.click(function() { // เงื่อนไขเมื่อคลิกที่ปุ่มนี้
// ตรวจสอบถ้ามีการแสดงรายการทั้งหมดอยู่แล้ว
if ($( "#tags" ).autocomplete( "widget" ).is( ":visible" ) ) {
$( "#tags" ).autocomplete( "close" ); // ปิดการแสดงรายการทั้งหมด
return;
}
// ส่งค่าว่างปล่าวไปทำการค้นหา จะได้ผลลัพธ์เป็นรายการทั้งหมด
$( "#tags" ).autocomplete( "search", "" );
$( "#tags" ).focus(); //ให้ cursor ไปอยู่ที่ input text id=tags
});
});
</script>
</body>
</html>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
22 Sep 10 ทบทวน การจัดการกับ ตัวแปร array ใน javascript ด้วย ฟังก์ชัน ตอนที่ 2 อ่าน 1723 02 Nov 10 แนะนำ และการใช้งาน jQuery Colorpicker Plugin การเลือกค่าสี อ่าน 1949 12 Nov 08 กำหนด permission ไฟล์หรือโฟลเดอร์ด้วยฟังก์ชัน FTP ใน PHP อ่าน 2137 12 Aug 10 ประยุกต์ ใช้ jQuery สร้างข้อความเลื่อน ซ้าย ขวา คล้าย marquee อ่าน 3265 07 Sep 10 ใช้ ckeditor กับ filemanager ด้วย php รองรับ ฟังก์ชัน javascript อ่าน 4036 25 Dec 09 สร้าง watermark ลายน้ำ ให้กับช่อง สำหรับการค้นหา ด้วย jQuery และ CSS อย่างง่าย อ่าน 4263 31 Mar 09 ดึงข้อมูลจากฐานข้อมูลเป็น excel ด้วย php รองรับภาษาไทย อ่าน 6721 26 Aug 10 ใช้ comments.get เรียกและ บันทึก facebook comment ล่าสุด ลงฐานข้อมูล ด้วย jQuery อ่าน 2806 02 Dec 10 แทรก emoticon ด้วย javascript ฟังก์ชัน ให้กับ ckeditor อ่าน 2837 24 Feb 11 ยืนยันการเปลี่ยนแปลงข้อมูลใน select option ด้วย javascript อย่างง่าย อ่าน 2530 14 Sep 10 การดึงข้อมูล จากฐานข้อมูล สร้าง xml ไฟล์ ด้วย php อ่าน 5484 03 Aug 11 ใช้งาน google chart ตัวใหม่สร้าง poll อย่างง่าย อ่าน 2180 04 Aug 09 การส่งข้อมูลแบบ post ด้วย ajax ของ jquery อ่าน 11026 25 Sep 08 การกำหนด selectors ด้วย jQuery เกี่ยวกับ form อ่าน 4760 19 Mar 11 การสร้างปุ่ม ล็อกอิน เว็บไซต์ แบบไม่แสดงรูป ด้วย facebook อ่าน 2589 25 Sep 08 การแสดงข้อมูลจากตารางด้วย PHP อ่าน 6150 25 Sep 08 การใช้งาน CSS ศึกษาิวิธีการนำ CSS ไปใช้กับ HTML อ่าน 7862 08 Feb 12 Google map API v.3 กับ jQuery ลากจุดหา ชื่อตำแหน่ง และ พิกัด ค่า latitude longitude อ่าน 2026 24 Feb 10 เทคนิค สร้าง effect add to cart ด้วย jQuery อย่างง่าย อ่าน 5312 27 Nov 09 แก้ปัญหาความกว้าง option ของ select tag ใน ie ด้วย jQuery และ css อย่างง่าย อ่าน 3023