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..... });

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

ซีเนียร์ ตัวเลือกและคำอธิบาย
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>

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

การใช้ฉลาก

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ตัวเลือก 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>

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

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

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ไฟล์ภายนอกสำหรับ 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 );
?>

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

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

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

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

ไวยากรณ์

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

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

ซีเนียร์ การดำเนินการและคำอธิบาย
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 ยังมีเมธอดเหตุการณ์ที่เรียกใช้สำหรับเหตุการณ์หนึ่ง ๆ วิธีการจัดกิจกรรมเหล่านี้แสดงไว้ด้านล่าง -

ซีเนียร์ วิธีการและคำอธิบายเหตุการณ์
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และเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์ คุณต้องดูผลลัพธ์ต่อไปนี้ด้วย -