JqueryUI - เติมข้อความอัตโนมัติ

การเติมข้อความอัตโนมัติเป็นกลไกที่ใช้บ่อยในเว็บไซต์สมัยใหม่เพื่อให้ผู้ใช้มีรายการคำแนะนำสำหรับจุดเริ่มต้นของคำซึ่งเขา / เธอได้พิมพ์ลงในกล่องข้อความ จากนั้นผู้ใช้สามารถเลือกรายการจากรายการซึ่งจะแสดงในช่องป้อนข้อมูล คุณลักษณะนี้ป้องกันไม่ให้ผู้ใช้ป้อนทั้งคำหรือชุดคำ

JQueryUI มีวิดเจ็ตเติมข้อความอัตโนมัติซึ่งเป็นตัวควบคุมที่ทำหน้าที่คล้ายกับดรอปดาวน์ <select> แต่กรองตัวเลือกเพื่อนำเสนอเฉพาะสิ่งที่ตรงกับสิ่งที่ผู้ใช้พิมพ์ลงในคอนโทรล jQueryUI ให้ไฟล์autocomplete() วิธีสร้างรายการคำแนะนำด้านล่างช่องป้อนข้อมูลและเพิ่มคลาส CSS ใหม่ให้กับองค์ประกอบที่เกี่ยวข้องเพื่อให้มีสไตล์ที่เหมาะสม

ช่องใด ๆ ที่สามารถรับอินพุตสามารถแปลงเป็นการเติมข้อความอัตโนมัติ ได้แก่ องค์ประกอบ<input>องค์ประกอบ <textarea>และองค์ประกอบที่มี แอตทริบิวต์เนื้อหาที่แก้ไขได้

ไวยากรณ์

autocomplete() วิธีการสามารถใช้ได้สองรูปแบบ -

$ (ตัวเลือกบริบท) .autocomplete (ตัวเลือก)วิธีการ
$ (ตัวเลือกบริบท) .autocomplete ("action", params) Method

$ (ตัวเลือกบริบท) .autocomplete (ตัวเลือก) วิธีการ

วิธีการเติมข้อความอัตโนมัติ (ตัวเลือก)ประกาศว่าองค์ประกอบ <input> HTML ต้องได้รับการจัดการเป็นช่องป้อนข้อมูลซึ่งจะแสดงอยู่เหนือรายการคำแนะนำ ตัวเลือกพารามิเตอร์เป็นวัตถุที่ระบุพฤติกรรมของรายการคำแนะนำเมื่อผู้ใช้พิมพ์ในช่องใส่ของ

ไวยากรณ์

$(selector, context).autocomplete (options);

คุณสามารถระบุตัวเลือกได้ครั้งละหนึ่งตัวเลือกโดยใช้วัตถุ Javascript หากมีให้เลือกมากกว่าหนึ่งตัวเลือกคุณจะแยกตัวเลือกโดยใช้ลูกน้ำดังนี้ -

$(selector, context).autocomplete({option1: value1, option2: value2..... });

ตารางต่อไปนี้แสดงตัวเลือกต่างๆที่สามารถใช้ได้กับวิธีนี้ -


$( ".selector" ).autocomplete({ appendTo: "#identifier" });
$( ".selector" ).autocomplete({ autoFocus: true });
$( ".selector" ).autocomplete({ delay: 500 });
$( ".selector" ).autocomplete({ disabled: true });
$( ".selector" ).autocomplete({ minLength: 0 });
$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });
$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });

ซีเนียร์	ตัวเลือกและคำอธิบาย
1	ภาคผนวก ตัวเลือกนี้ใช้ต่อท้ายองค์ประกอบในเมนู โดยค่าเริ่มต้นคือnull. Option - appendTo ตัวเลือกนี้ใช้ต่อท้ายองค์ประกอบในเมนู โดยค่าเริ่มต้นคือnull. เมื่อค่าเป็น null พ่อและแม่ของช่องใส่จะได้รับการตรวจสอบสำหรับการเรียนของUI ด้านหน้า หากพบองค์ประกอบที่มีคลาสui-frontเมนูจะถูกต่อท้ายองค์ประกอบนั้น Syntax `$( ".selector" ).autocomplete({ appendTo: "#identifier" });`
2	ออโต้โฟกัส ตัวเลือกนี้เมื่อตั้งค่าเป็นจริงรายการแรกของเมนูจะถูกโฟกัสโดยอัตโนมัติเมื่อเมนูแสดงขึ้น โดยค่าเริ่มต้นคือfalse. Option - autoFocus ตัวเลือกนี้เมื่อตั้งค่าเป็นจริงรายการแรกของเมนูจะถูกโฟกัสโดยอัตโนมัติเมื่อเมนูแสดงขึ้น โดยค่าเริ่มต้นคือfalse. Syntax `$( ".selector" ).autocomplete({ autoFocus: true });`
3	ล่าช้า อ็อพชันนี้เป็นจำนวนเต็มแทนจำนวนมิลลิวินาทีที่ต้องรอก่อนที่จะพยายามรับค่าที่ตรงกัน (ตามที่ระบุโดยอ็อพชันต้นทาง ) วิธีนี้สามารถช่วยลดการกระตุกเมื่อได้รับข้อมูลที่ไม่ใช่ในเครื่องโดยให้เวลาผู้ใช้ป้อนอักขระเพิ่มเติมก่อนที่จะเริ่มการค้นหา โดยค่าเริ่มต้นคือ300. Option - delay อ็อพชันนี้เป็นจำนวนเต็มแทนจำนวนมิลลิวินาทีที่ต้องรอก่อนที่จะพยายามรับค่าที่ตรงกัน (ตามที่ระบุโดยอ็อพชันต้นทาง ) วิธีนี้สามารถช่วยลดการกระตุกเมื่อได้รับข้อมูลที่ไม่ใช่ในเครื่องโดยให้เวลาผู้ใช้ป้อนอักขระเพิ่มเติมก่อนที่จะเริ่มการค้นหา โดยค่าเริ่มต้นคือ300. Syntax `$( ".selector" ).autocomplete({ delay: 500 });`
4	ปิดการใช้งาน ตัวเลือกนี้หากระบุและเป็นจริงวิดเจ็ตการเติมข้อความอัตโนมัติจะถูกปิดใช้งานในตอนแรก โดยค่าเริ่มต้นคือfalse. Option - disabled ตัวเลือกนี้หากระบุและเป็นจริงวิดเจ็ตการเติมข้อความอัตโนมัติจะถูกปิดใช้งานในตอนแรก โดยค่าเริ่มต้นคือfalse. Syntax `$( ".selector" ).autocomplete({ disabled: true });`
5	minLength จำนวนอักขระที่ต้องป้อนก่อนพยายามรับค่าที่ตรงกัน (ตามที่ระบุโดยอ็อพชันต้นทาง) วิธีนี้สามารถป้องกันไม่ให้นำเสนอชุดค่าที่ใหญ่เกินไปเมื่ออักขระบางตัวไม่เพียงพอที่จะลดทอนชุดค่าลงให้อยู่ในระดับที่เหมาะสม โดยค่าเริ่มต้นคือ1. Option - minLength จำนวนอักขระที่ต้องป้อนก่อนพยายามรับค่าที่ตรงกัน (ตามที่ระบุโดยอ็อพชันต้นทาง) วิธีนี้สามารถป้องกันไม่ให้นำเสนอชุดค่าที่ใหญ่เกินไปเมื่ออักขระบางตัวไม่เพียงพอที่จะลดทอนชุดค่าลงให้อยู่ในระดับที่เหมาะสม โดยค่าเริ่มต้นคือ1. Syntax `$( ".selector" ).autocomplete({ minLength: 0 });`
6	ตำแหน่ง ตัวเลือกนี้ระบุตำแหน่งของเมนูคำแนะนำที่สัมพันธ์กับองค์ประกอบอินพุตที่เกี่ยวข้อง ของค่าเริ่มต้นตัวเลือกในการองค์ประกอบเข้า แต่คุณสามารถระบุองค์ประกอบอื่นไปยังตำแหน่งกับ โดยค่าเริ่มต้นคือ{ my: "left top", at: "left bottom", collision: "none" }. Option - position ตัวเลือกนี้ระบุตำแหน่งของเมนูคำแนะนำที่สัมพันธ์กับองค์ประกอบอินพุตที่เกี่ยวข้อง ของค่าเริ่มต้นตัวเลือกในการองค์ประกอบเข้า แต่คุณสามารถระบุองค์ประกอบอื่นไปยังตำแหน่งกับ โดยค่าเริ่มต้นคือ{ my: "left top", at: "left bottom", collision: "none" }. Syntax `$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });`
7	แหล่งที่มา ตัวเลือกนี้ระบุลักษณะการรับข้อมูลที่ตรงกับข้อมูลอินพุต ต้องระบุค่ามิฉะนั้นจะไม่สร้างวิดเจ็ตการเติมข้อความอัตโนมัติ โดยค่าเริ่มต้นคือnone; must be specified. Option - source ตัวเลือกนี้ระบุลักษณะการรับข้อมูลที่ตรงกับข้อมูลอินพุต ต้องระบุค่ามิฉะนั้นจะไม่สร้างวิดเจ็ตการเติมข้อความอัตโนมัติ ค่านี้สามารถเป็น: String แทน URL ของทรัพยากรเซิร์ฟเวอร์ที่จะส่งคืนข้อมูลที่ตรงกัน an array ของข้อมูลท้องถิ่นที่จะจับคู่ค่าหรือ a function ที่ทำหน้าที่เป็นการโทรกลับทั่วไปจากการให้ค่าที่ตรงกัน Syntax `$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });`

ส่วนต่อไปนี้จะแสดงตัวอย่างการทำงานบางส่วนของฟังก์ชันการทำงานของวิดเจ็ตเติมข้อความอัตโนมัติ

ฟังก์ชันเริ่มต้น

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงตัวอย่างง่ายๆของฟังก์ชันการทำงานของวิดเจ็ตเติมข้อความอัตโนมัติโดยไม่ส่งพารามิเตอร์ไปยังไฟล์ autocomplete() วิธี.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { var availableTutorials = [ "ActionScript", "Bootstrap", "C", "C++", ]; $( "#automplete-1" ).autocomplete({
               source: availableTutorials
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-1">Tags: </label>
         <input id = "automplete-1">
      </div>
   </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML autocompleteexample.htmและเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณจะเห็นผลลัพธ์ต่อไปนี้ ตอนนี้คุณสามารถเล่นกับผลลัพธ์ -

การใช้ออโต้โฟกัส

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ตัวเลือก autoFocus ในวิดเจ็ตเติมข้อความอัตโนมัติของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { var availableTutorials = [ "ActionScript", "Bootstrap", "C", "C++", ]; $( "#automplete-2" ).autocomplete({
               source: availableTutorials,
               autoFocus:true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-2">Tags: </label>
         <input id = "automplete-2">
      </div>
   </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML autocompleteexample.htmและเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ด้วย ตอนนี้คุณสามารถเล่นกับผลลัพธ์ -

การใช้ minLength และ delay

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้สองตัวเลือก minLength และ delay ในวิดเจ็ตเติมข้อความอัตโนมัติของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { var availableTutorials = [ "ActionScript", "Bootstrap", "C", "C++", "Ecommerce", "Jquery", "Groovy", "Java", "JavaScript", "Lua", "Perl", "Ruby", "Scala", "Swing", "XHTML" ]; $( "#automplete-3" ).autocomplete({
               minLength:2,   
               delay:500,   
               source: availableTutorials
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type two letter for e.g:ja,sc etc</p>
         <label for = "automplete-3">Tags: </label>
         <input id = "automplete-3">
      </div>
   </body>
</html>

การใช้ฉลาก

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ตัวเลือก label ในวิดเจ็ตเติมข้อความอัตโนมัติของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#autocomplete-4" ).autocomplete({
               source: [
                  { label: "India", value: "IND" },
                  { label: "Australia", value: "AUS" }
               ]
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type I OR A</p>
         <input id = "autocomplete-4">
      </div>
   </body>
</html>

การใช้แหล่งภายนอก

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ไฟล์ภายนอกสำหรับ source ตัวเลือกในวิดเจ็ตเติมข้อความอัตโนมัติของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#autocomplete-5" ).autocomplete({
               source: "/jqueryui/search.php",
               minLength: 2
            });
         });
      </script> 
   </head>
   
   <body>
      <input id = "autocomplete-5">
   </body>
</html>

ไฟล์search.phpถูกวางไว้ที่ตำแหน่งเดียวกับไฟล์ด้านบน (autocompleteexample.html) เนื้อหาของ search.php มีดังต่อไปนี้ -

<?
$term = $_GET[ "term" ];
$companies = array( array( "label" => "JAVA", "value" => "1" ), array( "label" => "DATA IMAGE PROCESSING", "value" => "2" ), array( "label" => "JAVASCRIPT", "value" => "3" ), array( "label" => "DATA MANAGEMENT SYSTEM", "value" => "4" ), array( "label" => "COMPUTER PROGRAMMING", "value" => "5" ), array( "label" => "SOFTWARE DEVELOPMENT LIFE CYCLE", "value" => "6" ), array( "label" => "LEARN COMPUTER FUNDAMENTALS", "value" => "7" ), array( "label" => "IMAGE PROCESSING USING JAVA", "value" => "8" ), array( "label" => "CLOUD COMPUTING", "value" => "9" ), array( "label" => "DATA MINING", "value" => "10" ), array( "label" => "DATA WAREHOUSE", "value" => "11" ), array( "label" => "E-COMMERCE", "value" => "12" ), array( "label" => "DBMS", "value" => "13" ), array( "label" => "HTTP", "value" => "14" ) ); $result = array();
foreach ($companies as $company) {
   $companyLabel = $company[ "label" ];
   if ( strpos( strtoupper($companyLabel), strtoupper($term) )!== false ) {
      array_push( $result, $company );
   }
}

echo json_encode( $result );
?>

พิมพ์คำอักษรสองคำสำหรับเช่น ja, sc เป็นต้น

$ (ตัวเลือกบริบท) .autocomplete ("action", params) Method

วิธีการเติมข้อความอัตโนมัติ ("action", params)สามารถดำเนินการกับรายการคำแนะนำเช่นแสดงหรือซ่อน การดำเนินการถูกระบุเป็นสตริงในอาร์กิวเมนต์แรก (เช่น "ปิด" เพื่อซ่อนรายการ) ตรวจสอบการดำเนินการที่สามารถส่งผ่านได้ในตารางต่อไปนี้

ไวยากรณ์

$(selector, context).autocomplete ("action", params);;

ตารางต่อไปนี้แสดงการกระทำต่างๆที่สามารถใช้ได้กับวิธีนี้ -


$( ".selector" ).autocomplete("close");
$( ".selector" ).autocomplete("destroy");
$( ".selector" ).autocomplete("disable");
$( ".selector" ).autocomplete("enable");
var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );
var options = $( ".selector" ).autocomplete( "option" );
$( ".selector" ).autocomplete( "option", "disabled", true );
$( ".selector" ).autocomplete( "option", { disabled: true } );
$( ".selector" ).autocomplete( "search", "" );
$( ".selector" ).autocomplete("widget");

ซีเนียร์	การดำเนินการและคำอธิบาย
1	ปิด การดำเนินการนี้จะซ่อนรายการคำแนะนำในเมนูเติมข้อความอัตโนมัติ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - close การดำเนินการนี้จะซ่อนรายการคำแนะนำในเมนูเติมข้อความอัตโนมัติ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$( ".selector" ).autocomplete("close");`
2	ทำลาย การดำเนินการนี้จะลบฟังก์ชันการเติมข้อความอัตโนมัติ รายการคำแนะนำจะถูกลบ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - destroy การดำเนินการนี้จะลบฟังก์ชันการเติมข้อความอัตโนมัติ รายการคำแนะนำจะถูกลบ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$( ".selector" ).autocomplete("destroy");`
3	ปิดการใช้งาน การดำเนินการนี้จะปิดใช้งานกลไกการเติมข้อความอัตโนมัติ รายการคำแนะนำไม่ปรากฏอีกต่อไป วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - disable การดำเนินการนี้จะปิดใช้งานกลไกการเติมข้อความอัตโนมัติ รายการคำแนะนำไม่ปรากฏอีกต่อไป วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$( ".selector" ).autocomplete("disable");`
4	เปิดใช้งาน การดำเนินการนี้จะเปิดใช้งานกลไกการเติมข้อความอัตโนมัติอีกครั้ง รายการคำแนะนำจะปรากฏขึ้นอีกครั้ง วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - enable การดำเนินการนี้จะเปิดใช้งานกลไกการเติมข้อความอัตโนมัติอีกครั้ง รายการคำแนะนำจะปรากฏขึ้นอีกครั้ง วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$( ".selector" ).autocomplete("enable");`
5	ตัวเลือก (optionName) การดำเนินการนี้ดึงค่าของพารามิเตอร์optionName ที่ระบุ ตัวเลือกนี้สอดคล้องกับหนึ่งในตัวเลือกที่ใช้กับการเติมข้อความอัตโนมัติ (ตัวเลือก) Action - option( optionName ) การดำเนินการนี้ดึงค่าของพารามิเตอร์optionName ที่ระบุ ตัวเลือกนี้สอดคล้องกับหนึ่งในตัวเลือกที่ใช้กับการเติมข้อความอัตโนมัติ (ตัวเลือก) Syntax `var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );`
6	ตัวเลือก การดำเนินการนี้ได้รับวัตถุที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชตัวเลือกการเติมข้อความอัตโนมัติในปัจจุบัน Action - option การดำเนินการนี้ได้รับวัตถุที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชตัวเลือกการเติมข้อความอัตโนมัติในปัจจุบัน Syntax `var options = $( ".selector" ).autocomplete( "option" );`
7	ตัวเลือก (optionName ค่า) การกระทำนี้จะตั้งค่าตัวเลือกการเติมข้อความอัตโนมัติที่เกี่ยวข้องกับการระบุOptionName อาร์กิวเมนต์optionNameคือชื่อของตัวเลือกที่จะตั้งค่าและค่าคือค่าที่จะตั้งค่าสำหรับอ็อพชัน Action - option( optionName, value ) การกระทำนี้จะตั้งค่าตัวเลือกการเติมข้อความอัตโนมัติที่เกี่ยวข้องกับการระบุOptionName อาร์กิวเมนต์optionNameคือชื่อของตัวเลือกที่จะตั้งค่าและค่าคือค่าที่จะตั้งค่าสำหรับอ็อพชัน Syntax `$( ".selector" ).autocomplete( "option", "disabled", true );`
8	option (ตัวเลือก) การดำเนินการนี้เป็นการตั้งค่าตัวเลือกอย่างน้อยหนึ่งตัวเลือกสำหรับการเติมข้อความอัตโนมัติ ตัวเลือกอาร์กิวเมนต์เป็นแผนที่ของคู่ค่าตัวเลือกที่จะตั้งค่า Action - option( options ) การดำเนินการนี้เป็นการตั้งค่าตัวเลือกอย่างน้อยหนึ่งตัวเลือกสำหรับการเติมข้อความอัตโนมัติ ตัวเลือกอาร์กิวเมนต์เป็นแผนที่ของคู่ค่าตัวเลือกที่จะตั้งค่า Syntax `$( ".selector" ).autocomplete( "option", { disabled: true } );`
9	ค้นหา ([ค่า]) การดำเนินการนี้ค้นหาความสอดคล้องระหว่างค่าสตริงและแหล่งข้อมูล (ระบุในoptions.source ) ต้องถึงจำนวนอักขระขั้นต่ำ (ที่ระบุในoptions.minLength ) เป็นค่ามิฉะนั้นจะไม่ดำเนินการค้นหา Action - search( [value ] ) การดำเนินการนี้ค้นหาความสอดคล้องระหว่างค่าสตริงและแหล่งข้อมูล (ระบุในoptions.source ) ต้องถึงจำนวนอักขระขั้นต่ำ (ที่ระบุในoptions.minLength ) เป็นค่ามิฉะนั้นจะไม่ดำเนินการค้นหา Syntax `$( ".selector" ).autocomplete( "search", "" );`
10	วิดเจ็ต ดึงองค์ประกอบ <ul> DOM ที่สอดคล้องกับรายการคำแนะนำ นี่คือออบเจ็กต์ของคลาส jQuery ที่ช่วยให้เข้าถึงรายการได้ง่ายโดยไม่ต้องใช้ตัวเลือก jQuery Action - widget ดึงองค์ประกอบ <ul> DOM ที่สอดคล้องกับรายการคำแนะนำ นี่คือออบเจ็กต์ของคลาส jQuery ที่ช่วยให้เข้าถึงรายการได้ง่ายโดยไม่ต้องใช้ตัวเลือก jQuery Syntax `$( ".selector" ).autocomplete("widget");`

ตัวอย่าง

ตอนนี้ให้เราดูตัวอย่างโดยใช้การดำเนินการจากตารางด้านบน ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานของตัวเลือก (OptionName ค่า)วิธีการ

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
               "Ecommerce",
               "Jquery",
               "Groovy",
               "Java",
               "JavaScript",
               "Lua",
               "Perl",
               "Ruby",
               "Scala",
               "Swing",
               "XHTML"	
            ];
            $( "#automplete-6" ).autocomplete({ source: availableTutorials }); $( "#automplete-6" ).autocomplete("option", "position",
               { my : "right-10 top+10", at: "right top" }) 
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-6">Tags: </label>
         <input id = "automplete-6">
      </div>
   </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML autocompleteexample.htm และเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ -

จุดต่อ

วิดเจ็ตเติมข้อความอัตโนมัติสามารถขยายได้เมื่อสร้างด้วยโรงงานวิดเจ็ต เมื่อขยายวิดเจ็ตคุณมีความสามารถในการลบล้างหรือเพิ่มพฤติกรรมของวิธีการที่มีอยู่ วิธีตารางต่อไปนี้ที่ทำหน้าที่เป็นจุดส่วนขยายที่มีความมั่นคง API เช่นเดียวกับวิธีการปลั๊กอินที่ระบุไว้ข้างต้น

ซีเนียร์	วิธีการและคำอธิบาย
1	_renderItem (ul รายการ) วิธีนี้ควบคุมการสร้างตัวเลือกแต่ละรายการในเมนูของวิดเจ็ต วิธีนี้จะสร้างองค์ประกอบ <li> ใหม่ผนวกเข้ากับเมนูและส่งคืน _renderItem( ul, item ) วิธีนี้ควบคุมการสร้างตัวเลือกแต่ละรายการในเมนูของวิดเจ็ต วิธีนี้จะสร้างองค์ประกอบ <li> ใหม่ผนวกเข้ากับเมนูและส่งคืน ที่ไหน - <ul> คือองค์ประกอบที่ต้องต่อท้ายด้วย <li> องค์ประกอบที่สร้างขึ้นใหม่ item สามารถเป็นเลเบล (สตริง)สตริงที่จะแสดงสำหรับไอเท็มหรือค่า (สตริง)ค่าที่จะแทรกลงในอินพุตเมื่อเลือกไอเท็ม
2	_renderMenu (ul รายการ) วิธีนี้ควบคุมการสร้างเมนูของวิดเจ็ต _renderMenu( ul, items ) วิธีนี้ควบคุมการสร้างเมนูของวิดเจ็ต ที่ไหน - <ul>เป็นอาร์เรย์ของรายการที่ตรงกับคำที่ผู้ใช้พิมพ์ แต่ละรายการเป็นวัตถุที่มีคุณสมบัติฉลากและค่า
3	_resizeMenu () วิธีการนี้จะควบคุมการปรับขนาดเมนูก่อนที่มันจะเป็นองค์ประกอบเมนู displayed.The สามารถใช้ได้ที่this.menu.element วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ _resizeMenu() วิธีการนี้จะควบคุมการปรับขนาดเมนูก่อนที่มันจะเป็นองค์ประกอบเมนู displayed.The สามารถใช้ได้ที่this.menu.element วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

การจัดการเหตุการณ์เกี่ยวกับองค์ประกอบการเติมข้อความอัตโนมัติ

นอกเหนือจากวิธีการเติมข้อความอัตโนมัติ (ตัวเลือก) ที่เราเห็นในส่วนก่อนหน้านี้ JqueryUI ยังมีเมธอดเหตุการณ์ที่เรียกใช้สำหรับเหตุการณ์หนึ่ง ๆ วิธีการจัดกิจกรรมเหล่านี้แสดงไว้ด้านล่าง -


$( ".selector" ).autocomplete({
   change: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   close: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   create: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   focus: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   open: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   response: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   search: function( event, ui ) {}
});
$( ".selector" ).autocomplete({
   select: function( event, ui ) {}
});

ซีเนียร์	วิธีการและคำอธิบายเหตุการณ์
1	การเปลี่ยนแปลง (เหตุการณ์, UI) เหตุการณ์นี้จะถูกทริกเกอร์เมื่อค่าขององค์ประกอบ <input> ถูกเปลี่ยนตามการเลือก เมื่อถูกทริกเกอร์เหตุการณ์นี้จะเกิดขึ้นหลังจากเหตุการณ์ปิดถูกทริกเกอร์เสมอ Event - change(event, ui) เหตุการณ์นี้จะถูกทริกเกอร์เมื่อค่าขององค์ประกอบ <input> ถูกเปลี่ยนตามการเลือก เมื่อถูกทริกเกอร์เหตุการณ์นี้จะเกิดขึ้นหลังจากเหตุการณ์ปิดถูกทริกเกอร์เสมอ ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ ค่าที่เป็นไปได้ของUIคือ - item- รายการที่เลือกจากเมนูถ้ามี มิฉะนั้นคุณสมบัติจะเป็นโมฆะ Syntax `$( ".selector" ).autocomplete({ change: function( event, ui ) {} });`
2	ปิด (เหตุการณ์ ui) เหตุการณ์นี้จะเกิดขึ้นทุกครั้งที่ปิดเมนูเติมข้อความอัตโนมัติ Event - close(event, ui) เหตุการณ์นี้จะเกิดขึ้นทุกครั้งที่ปิดเมนูเติมข้อความอัตโนมัติ ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Syntax `$( ".selector" ).autocomplete({ close: function( event, ui ) {} });`
3	สร้าง (เหตุการณ์, UI) เหตุการณ์นี้จะเกิดขึ้นเมื่อมีการสร้างการเติมข้อความอัตโนมัติ Event - create(event, ui) เหตุการณ์นี้จะถูกเรียกเมื่อเติมข้อความอัตโนมัติจะถูกสร้างขึ้น .. ไหนเหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ ค่าที่เป็นไปได้ของUIคือ - item- รายการที่เลือกจากเมนูถ้ามี มิฉะนั้นคุณสมบัติจะเป็นโมฆะ Syntax `$( ".selector" ).autocomplete({ create: function( event, ui ) {} });`
4	โฟกัส (เหตุการณ์, UI) เหตุการณ์นี้จะเกิดขึ้นเมื่อใดก็ตามที่ตัวเลือกเมนูใดเมนูหนึ่งได้รับโฟกัส เว้นแต่จะยกเลิก (ตัวอย่างเช่นโดยการคืนค่าเป็นเท็จ) ค่าที่โฟกัสจะถูกตั้งค่าเป็นองค์ประกอบ <input> Event - focus(event, ui) เหตุการณ์นี้จะเกิดขึ้นเมื่อใดก็ตามที่ตัวเลือกเมนูใดเมนูหนึ่งได้รับโฟกัส เว้นแต่จะยกเลิก (ตัวอย่างเช่นโดยการคืนค่าเป็นเท็จ) ค่าที่โฟกัสจะถูกกำหนดเป็นองค์ประกอบ ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ ค่าที่เป็นไปได้ของUIคือ - item - รายการที่เน้น Syntax `$( ".selector" ).autocomplete({ focus: function( event, ui ) {} });`
5	เปิด (เหตุการณ์, ui) เหตุการณ์นี้จะถูกทริกเกอร์หลังจากอ่านข้อมูลแล้วและเมนูกำลังจะเปิดขึ้น Event - open(event, ui) เหตุการณ์นี้จะถูกทริกเกอร์หลังจากอ่านข้อมูลแล้วและเมนูกำลังจะเปิดขึ้น ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Syntax `$( ".selector" ).autocomplete({ open: function( event, ui ) {} });`
6	การตอบสนอง (เหตุการณ์, UI) เหตุการณ์นี้จะถูกทริกเกอร์หลังจากการค้นหาเสร็จสิ้นก่อนที่เมนูจะปรากฏขึ้น เหตุการณ์นี้จะถูกทริกเกอร์เสมอเมื่อการค้นหาเสร็จสิ้นแม้ว่าเมนูจะไม่ปรากฏขึ้นเนื่องจากไม่มีผลลัพธ์หรือปิดใช้งานการเติมข้อความอัตโนมัติ Event - response(event, ui) เหตุการณ์นี้จะถูกทริกเกอร์หลังจากการค้นหาเสร็จสิ้นก่อนที่เมนูจะปรากฏขึ้น เหตุการณ์นี้จะถูกทริกเกอร์เสมอเมื่อการค้นหาเสร็จสิ้นแม้ว่าเมนูจะไม่ปรากฏขึ้นเนื่องจากไม่มีผลลัพธ์หรือปิดใช้งานการเติมข้อความอัตโนมัติ ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ ค่าที่เป็นไปได้ของUIคือ - content - มีข้อมูลการตอบกลับและสามารถแก้ไขเพื่อเปลี่ยนแปลงผลลัพธ์ที่จะแสดง Syntax `$( ".selector" ).autocomplete({ response: function( event, ui ) {} });`
7	ค้นหา (เหตุการณ์, ui) เหตุการณ์นี้ถูกทริกเกอร์หลังจากที่มีการหน่วงเวลาและเกณฑ์minLengthก่อนที่กลไกที่ระบุโดยแหล่งที่มาจะถูกเปิดใช้งาน หากยกเลิกการดำเนินการค้นหาจะถูกยกเลิก Event - search(event, ui) เหตุการณ์นี้ถูกทริกเกอร์หลังจากที่มีการหน่วงเวลาและเกณฑ์minLengthก่อนที่กลไกที่ระบุโดยแหล่งที่มาจะถูกเปิดใช้งาน หากยกเลิกการดำเนินการค้นหาจะถูกยกเลิก ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Syntax `$( ".selector" ).autocomplete({ search: function( event, ui ) {} });`
8	เลือก (เหตุการณ์, ui) เหตุการณ์นี้จะทริกเกอร์เมื่อเลือกค่าจากเมนูเติมข้อความอัตโนมัติ การยกเลิกเหตุการณ์นี้จะป้องกันไม่ให้ตั้งค่าเป็นองค์ประกอบ <input> (แต่ไม่ได้ป้องกันไม่ให้ปิดเมนู) Event - select(event, ui) เหตุการณ์นี้จะทริกเกอร์เมื่อเลือกค่าจากเมนูเติมข้อความอัตโนมัติ การยกเลิกเหตุการณ์นี้จะป้องกันไม่ให้ตั้งค่าเป็นองค์ประกอบ <input> (แต่ไม่ได้ป้องกันไม่ให้ปิดเมนู) ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ ค่าที่เป็นไปได้ของUIคือ - item - วัตถุที่มีคุณสมบัติฉลากและค่าสำหรับตัวเลือกที่เลือก Syntax `$( ".selector" ).autocomplete({ select: function( event, ui ) {} });`

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานเมธอดเหตุการณ์ในวิดเจ็ตเติมข้อความอัตโนมัติ ตัวอย่างนี้แสดงให้เห็นถึงการใช้งานของเหตุการณ์ที่เกิดขึ้นมุ่งเน้นและเลือก

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         #project-label {
            display: block;
            font-weight: bold;
            margin-bottom: 1em;
         }
         #project-icon {
            float: left;
            height: 32px;
            width: 32px;
         }
         #project-description {
            margin: 0;
            padding: 0;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() { var projects = [ { value: "java", label: "Java", desc: "write once run anywhere", }, { value: "jquery-ui", label: "jQuery UI", desc: "the official user interface library for jQuery", }, { value: "Bootstrap", label: "Twitter Bootstrap", desc: "popular front end frameworks ", } ]; $( "#project" ).autocomplete({
               minLength: 0,
               source: projects,
               focus: function( event, ui ) {
                  $( "#project" ).val( ui.item.label ); return false; }, select: function( event, ui ) { $( "#project" ).val( ui.item.label );
                  $( "#project-id" ).val( ui.item.value ); $( "#project-description" ).html( ui.item.desc );
                  return false;
               }
            })
				
            .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
               return $( "<li>" )
               .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
               .appendTo( ul );
            };
         });
      </script>
   </head>
   
   <body>
      <div id = "project-label">Select a project (type "a" for a start):</div>
      <input id = "project">
      <input type = "hidden" id = "project-id">
      <p id = "project-description"></p>
   </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML autocompleteexample.htmและเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์ คุณต้องดูผลลัพธ์ต่อไปนี้ด้วย -