แจก!!! Text Autocomplete พร้อมตัวอย่าง Autocomplete จังหวัดประเทศไทย

การทำ Autocomplete คือการเพิ่มความสามารถให้กับ Textbox คือ เมื่อเราพิมพ์ข้อความลงไปใน Textbox ก็จะมีข้อความที่สมบูรณ์แสดงขึ้นมาให้เราเลือก ตามรูปตัวอย่างด้านล่าง

Download

ตัวอย่างการใช้งาน Text Autocomplete

ในการยกตัวอย่างการใช้งาน ผมจะขอนำเสนอในรูปแบบของการทำ Autocomplete รายชื่อจังหวัดของประเทศไทย (ลองใช้งานได้ ในกรอบด้านล่าง)

ตัวอย่างการตั้งค่า Text Autocomplete

เริ่มที่ เรียกใช้งาน StyleSheet และ Javascript ใน Tag <header>....</header>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="./inc/demo.css">
<link rel="stylesheet" href="inc/jquery.autocomplete.css">
<script src="./inc/jquery.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="inc/jquery.autocomplete.js" type="text/javascript"></script>

ในส่วนของ Body สร้าง Input field ที่ต้องการทำให้เป็น Autocomplete พร้อมกำหนด id ให้กับ Input นั้น เช่น id="province_auto"

<div class="auto" style="padding: 25px; width: 400px;">
<div class="form-group" style="margin:0px;">
<strong>กรอกจังหวัด</strong>
<input type="text" class="form-control" id="province_auto" placeholder="กรอกจังหวัด">
</div>
</div>

ในส่วนของ Script กำหนดค่าตัวแปร province เป็นรายชื่อจังหวัดจากนั้นเรียกใช้งานผ่าน jQuery ด้วยคำสั่ง .autocomplete

<script>
    var province = ['กระบี่', 'กรุงเทพมหานคร', 'กาญจนบุรี', 'กาฬสินธุ์', 'กำแพงเพชร', 'ขอนแก่น', 'จันทบุรี', 'ฉะเชิงเทรา', 'ชลบุรี', 'ชัยนาท', 'ชัยภูมิ', 'ชุมพร', 'เชียงราย', 'เชียงใหม่', 'ตรัง', 'ตราด', 'ตาก', 'นครนายก', 'นครปฐม', 'นครพนม', 'นครราชสีมา', 'นครศรีธรรมราช', 'นครสวรรค์', 'นนทบุรี', 'นราธิวาส', 'น่าน', 'บึงกาฬ', 'บุรีรัมย์', 'ปทุมธานี', 'ประจวบคีรีขันธ์', 'ปราจีนบุรี', 'ปัตตานี', 'พระนครศรีอยุธยา', 'พะเยา', 'พังงา', 'พัทลุง', 'พิจิตร', 'พิษณุโลก', 'เพชรบุรี', 'เพชรบูรณ์', 'แพร่', 'ภูเก็ต', 'มหาสารคาม', 'มุกดาหาร', 'แม่ฮ่องสอน', 'ยโสธร', 'ยะลา', 'ร้อยเอ็ด', 'ระนอง', 'ระยอง', 'ราชบุรี', 'ลพบุรี', 'ลำปาง', 'ลำพูน', 'เลย', 'ศรีสะเกษ', 'สกลนคร', 'สงขลา', 'สตูล', 'สมุทรปราการ', 'สมุทรสงคราม', 'สมุทรสาคร', 'สระแก้ว', 'สระบุรี', 'สิงห์บุรี', 'สุโขทัย', 'สุพรรณบุรี', 'สุราษฎร์ธานี', 'สุรินทร์', 'หนองคาย', 'หนองบัวลำภู', 'อ่างทอง', 'อำนาจเจริญ', 'อุดรธานี', 'อุตรดิตถ์', 'อุทัยธานี', 'อุบลราชธานี']

    $('#province_auto').autocomplete({
        source:[province]
    });
</script>

ขอบคุณความรู้ดี ๆ จาก https://xdsoft.net/