JqueryUI - Pelengkapan otomatis

Penyelesaian otomatis adalah mekanisme yang sering digunakan di situs web modern untuk memberikan daftar saran awal kata kepada pengguna, yang telah diketiknya di kotak teks. Pengguna kemudian dapat memilih item dari daftar, yang akan ditampilkan di kolom input. Fitur ini mencegah pengguna untuk memasukkan seluruh kata atau sekumpulan kata.

JQueryUI menyediakan widget pelengkapan otomatis - kontrol yang berfungsi sangat mirip dengan dropdown <select>, tetapi memfilter pilihan untuk hanya menampilkan yang cocok dengan apa yang diketik pengguna ke dalam kontrol. jQueryUI menyediakanautocomplete() metode untuk membuat daftar saran di bawah bidang masukan dan menambahkan kelas CSS baru ke elemen terkait untuk memberi mereka gaya yang sesuai.

Setiap field yang dapat menerima input dapat diubah menjadi Autocomplete, yaitu elemen <input> , elemen <textarei> , dan elemen dengan atribut contenteditable .

Sintaksis

Itu autocomplete() metode dapat digunakan dalam dua bentuk -

$ (selector, context) .autocomplete (options) Metode
$ (selector, context) .autocomplete ("action", params) Metode

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

Metode pelengkapan otomatis (opsi) menyatakan bahwa elemen <input> HTML harus dikelola sebagai bidang masukan yang akan ditampilkan di atas daftar saran. The pilihan parameter adalah obyek yang menentukan perilaku daftar saran ketika pengguna berada mengetik di kolom input.

Sintaksis

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

Anda dapat memberikan satu atau lebih opsi sekaligus menggunakan objek Javascript. Jika ada lebih dari satu pilihan yang akan diberikan maka Anda akan memisahkannya menggunakan koma sebagai berikut -

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

Tabel berikut mencantumkan opsi berbeda yang dapat digunakan dengan metode ini -


$( ".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" ] });

Sr.No.	Opsi & Deskripsi
1	appendTo Opsi ini digunakan untuk menambahkan elemen ke menu. Secara default nilainya adalahnull. Option - appendTo Opsi ini digunakan untuk menambahkan elemen ke menu. Secara default nilainya adalahnull. Jika nilainya null, orang tua dari kolom input akan diperiksa untuk kelas ui-front . Jika elemen dengan kelas ui-depan ditemukan, menu akan ditambahkan ke elemen itu. Syntax `$( ".selector" ).autocomplete({ appendTo: "#identifier" });`
2	fokus otomatis Opsi ini jika disetel ke true , item pertama dari menu akan secara otomatis difokuskan saat menu ditampilkan. Secara default nilainya adalahfalse. Option - autoFocus Opsi ini jika disetel ke true , item pertama dari menu akan secara otomatis difokuskan saat menu ditampilkan. Secara default nilainya adalahfalse. Syntax `$( ".selector" ).autocomplete({ autoFocus: true });`
3	menunda Opsi ini adalah Integer yang mewakili jumlah milidetik untuk menunggu sebelum mencoba mendapatkan nilai yang cocok (seperti yang ditentukan oleh opsi sumber ). Hal ini dapat membantu mengurangi meronta-ronta saat data non-lokal diperoleh dengan memberikan waktu kepada pengguna untuk memasukkan lebih banyak karakter sebelum pencarian dimulai. Secara default nilainya adalah300. Option - delay Opsi ini adalah Integer yang mewakili jumlah milidetik untuk menunggu sebelum mencoba mendapatkan nilai yang cocok (seperti yang ditentukan oleh opsi sumber ). Hal ini dapat membantu mengurangi meronta-ronta saat data non-lokal diperoleh dengan memberikan waktu kepada pengguna untuk memasukkan lebih banyak karakter sebelum pencarian dimulai. Secara default nilainya adalah300. Syntax `$( ".selector" ).autocomplete({ delay: 500 });`
4	dengan disabilitas Opsi ini jika ditentukan dan benar , widget pelengkapan otomatis awalnya dinonaktifkan. Secara default nilainya adalahfalse. Option - disabled Opsi ini jika ditentukan dan benar , widget pelengkapan otomatis awalnya dinonaktifkan. Secara default nilainya adalahfalse. Syntax `$( ".selector" ).autocomplete({ disabled: true });`
5	minLength Jumlah karakter yang harus dimasukkan sebelum mencoba mendapatkan nilai yang cocok (seperti yang ditentukan oleh opsi sumber). Hal ini dapat mencegah kumpulan nilai yang terlalu besar untuk disajikan saat beberapa karakter tidak cukup untuk mengurangi kumpulan ke tingkat yang wajar. Secara default nilainya adalah1. Option - minLength Jumlah karakter yang harus dimasukkan sebelum mencoba mendapatkan nilai yang cocok (seperti yang ditentukan oleh opsi sumber). Hal ini dapat mencegah kumpulan nilai yang terlalu besar untuk disajikan saat beberapa karakter tidak cukup untuk mengurangi kumpulan ke tingkat yang wajar. Secara default nilainya adalah1. Syntax `$( ".selector" ).autocomplete({ minLength: 0 });`
6	posisi Opsi ini mengidentifikasi posisi menu saran dalam kaitannya dengan elemen masukan terkait. The of default pilihan untuk elemen input, tetapi Anda dapat menentukan elemen lain untuk posisi melawan. Secara default nilainya adalah{ my: "left top", at: "left bottom", collision: "none" }. Option - position Opsi ini mengidentifikasi posisi menu saran dalam kaitannya dengan elemen masukan terkait. The of default pilihan untuk elemen input, tetapi Anda dapat menentukan elemen lain untuk posisi melawan. Secara default nilainya adalah{ my: "left top", at: "left bottom", collision: "none" }. Syntax `$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });`
7	sumber Opsi ini menentukan cara data yang cocok dengan data masukan diperoleh. Nilai harus diberikan atau widget pelengkapan otomatis tidak akan dibuat. Secara default nilainya adalahnone; must be specified. Option - source Opsi ini menentukan cara data yang cocok dengan data masukan diperoleh. Nilai harus diberikan atau widget pelengkapan otomatis tidak akan dibuat. Nilai ini bisa berupa: String mewakili URL sumber daya server yang akan mengembalikan data yang cocok, an array data lokal yang nilainya akan dicocokkan, atau a function yang berfungsi sebagai panggilan balik umum untuk memberikan nilai yang cocok. Syntax `$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });`

Bagian berikut akan menunjukkan kepada Anda beberapa contoh yang berfungsi dari fungsi widget pelengkapan otomatis.

Fungsionalitas Default

Contoh berikut menunjukkan contoh sederhana dari fungsi widget pelengkapan otomatis, tanpa meneruskan parameter ke autocomplete() metode.

<!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>

Mari kita simpan kode di atas dalam file HTML autocompleteexample.htmdan membukanya di browser standar yang mendukung javascript, Anda akan melihat output berikut. Sekarang, Anda bisa bermain dengan hasilnya -

Penggunaan fokus otomatis

Contoh berikut menunjukkan penggunaan opsi autoFocus di widget pelengkapan otomatis 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>

Mari kita simpan kode di atas dalam file HTML autocompleteexample.htmdan membukanya di browser standar yang mendukung javascript, Anda juga harus melihat output berikut. Sekarang, Anda bisa bermain dengan hasilnya -

Penggunaan minLength dan delay

Contoh berikut menunjukkan penggunaan dua opsi minLength dan delay di widget pelengkapan otomatis 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>

Penggunaan Label

Contoh berikut menunjukkan penggunaan opsi label di widget pelengkapan otomatis 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>

Penggunaan Sumber Eksternal

Contoh berikut menunjukkan penggunaan file eksternal untuk source opsi di widget pelengkapan otomatis 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>

File search.php ditempatkan di lokasi yang sama dengan file di atas (autocompleteexample.html). Isi search.php adalah sebagai berikut -

<?
$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 );
?>

Ketikkan dua huruf kata untuk misalnya: ja, sc dll

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

Metode pelengkapan otomatis ("tindakan", params) dapat melakukan tindakan pada daftar saran, seperti tampilkan atau sembunyikan. Tindakan ditentukan sebagai String dalam argumen pertama (misalnya, "tutup" untuk menyembunyikan daftar). Simak tindakan yang bisa dilalui, di tabel berikut.

Sintaksis

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

Tabel berikut mencantumkan berbagai tindakan yang dapat digunakan dengan metode ini -


$( ".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");

Sr.No.	Tindakan & Deskripsi
1	Menutup Tindakan ini menyembunyikan daftar saran di menu Pelengkapan Otomatis. Metode ini tidak menerima argumen apa pun. Action - close Tindakan ini menyembunyikan daftar saran di menu Pelengkapan Otomatis. Metode ini tidak menerima argumen apa pun. Syntax `$( ".selector" ).autocomplete("close");`
2	menghancurkan Tindakan ini menghapus fungsionalitas pelengkapan otomatis. Daftar saran dihapus. Metode ini tidak menerima argumen apa pun. Action - destroy Tindakan ini menghapus fungsionalitas pelengkapan otomatis. Daftar saran dihapus. Metode ini tidak menerima argumen apa pun. Syntax `$( ".selector" ).autocomplete("destroy");`
3	nonaktifkan Tindakan ini menonaktifkan mekanisme pelengkapan otomatis. Daftar saran tidak lagi muncul. Metode ini tidak menerima argumen apa pun. Action - disable Tindakan ini menonaktifkan mekanisme pelengkapan otomatis. Daftar saran tidak lagi muncul. Metode ini tidak menerima argumen apa pun. Syntax `$( ".selector" ).autocomplete("disable");`
4	memungkinkan Tindakan ini mengaktifkan kembali mekanisme pelengkapan otomatis. Daftar saran akan ditampilkan lagi. Metode ini tidak menerima argumen apa pun. Action - enable Tindakan ini mengaktifkan kembali mekanisme pelengkapan otomatis. Daftar saran akan ditampilkan lagi. Metode ini tidak menerima argumen apa pun. Syntax `$( ".selector" ).autocomplete("enable");`
5	option (optionName) Tindakan ini mengambil nilai dari parameter yang ditentukan optionName . Opsi ini sesuai dengan salah satu yang digunakan dengan pelengkapan otomatis (opsi). Action - option( optionName ) Tindakan ini mengambil nilai dari parameter yang ditentukan optionName . Opsi ini sesuai dengan salah satu yang digunakan dengan pelengkapan otomatis (opsi). Syntax `var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );`
6	pilihan Tindakan ini mendapatkan objek yang berisi pasangan kunci / nilai yang mewakili hash opsi pelengkapan otomatis saat ini. Action - option Tindakan ini mendapatkan objek yang berisi pasangan kunci / nilai yang mewakili hash opsi pelengkapan otomatis saat ini. Syntax `var options = $( ".selector" ).autocomplete( "option" );`
7	option (optionName, value) Tindakan ini menyetel nilai opsi pelengkapan otomatis yang terkait dengan optionName yang ditentukan . Argumen optionName adalah nama opsi yang akan disetel dan nilai adalah nilai yang akan disetel untuk opsi tersebut. Action - option( optionName, value ) Tindakan ini menyetel nilai opsi pelengkapan otomatis yang terkait dengan optionName yang ditentukan . Argumen optionName adalah nama opsi yang akan disetel dan nilai adalah nilai yang akan disetel untuk opsi tersebut. Syntax `$( ".selector" ).autocomplete( "option", "disabled", true );`
8	opsi (opsi) Tindakan ini menyetel satu atau beberapa opsi untuk pelengkapan otomatis. Opsi argumen adalah peta pasangan opsi-nilai yang akan disetel. Action - option( options ) Tindakan ini menyetel satu atau beberapa opsi untuk pelengkapan otomatis. Opsi argumen adalah peta pasangan opsi-nilai yang akan disetel. Syntax `$( ".selector" ).autocomplete( "option", { disabled: true } );`
9	telusuri ([nilai]) Tindakan ini mencari korespondensi antara nilai string dan sumber data (ditentukan dalam options.source ). Jumlah minimum karakter (ditunjukkan dalam options.minLength ) harus dicapai nilainya, jika tidak pencarian tidak dilakukan. Action - search( [value ] ) Tindakan ini mencari korespondensi antara nilai string dan sumber data (ditentukan dalam options.source ). Jumlah minimum karakter (ditunjukkan dalam options.minLength ) harus dicapai nilainya, jika tidak pencarian tidak dilakukan. Syntax `$( ".selector" ).autocomplete( "search", "" );`
10	widget Ambil <ul> elemen DOM yang sesuai dengan daftar saran. Ini adalah objek kelas jQuery yang memungkinkan akses mudah ke daftar tanpa menggunakan selektor jQuery. Action - widget Ambil <ul> elemen DOM yang sesuai dengan daftar saran. Ini adalah objek kelas jQuery yang memungkinkan akses mudah ke daftar tanpa menggunakan selektor jQuery. Syntax `$( ".selector" ).autocomplete("widget");`

Contoh

Sekarang mari kita lihat contoh menggunakan tindakan dari tabel di atas. Contoh berikut menunjukkan penggunaan metode option (optionName, value) .

<!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>

Mari kita simpan kode di atas dalam file HTML autocompleteexample.htm dan membukanya di browser standar yang mendukung javascript, Anda juga harus melihat output berikut -

Poin Ekstensi

Widget pelengkapan otomatis dapat diperpanjang seperti yang dibuat dengan pabrik widget. Saat memperluas widget, Anda memiliki kemampuan untuk mengganti atau menambah perilaku metode yang ada. Tabel berikut mencantumkan metode yang bertindak sebagai titik ekstensi dengan stabilitas API yang sama seperti metode plugin yang tercantum di atas .

Sr.No.	Metode & Deskripsi
1	_renderItem (ul, item) Metode ini mengontrol pembuatan setiap opsi di menu widget. Metode ini membuat elemen <li> baru, menambahkannya ke menu dan mengembalikannya. _renderItem( ul, item ) Metode ini mengontrol pembuatan setiap opsi di menu widget. Metode ini membuat elemen <li> baru, menambahkannya ke menu dan mengembalikannya. Dimana - <ul> adalah elemen yang harus ditambahkan ke elemen <li> yang baru dibuat. item dapat berupa label (String) , string untuk ditampilkan untuk item, atau nilai (String) , nilai yang akan dimasukkan ke dalam input ketika item dipilih.
2	_renderMenu (ul, item) Metode ini mengontrol pembuatan menu widget. _renderMenu( ul, items ) Metode ini mengontrol pembuatan menu widget. Dimana - <ul>adalah Array item yang cocok dengan istilah yang diketik pengguna. Setiap item adalah Objek dengan properti label dan nilai .
3	_resizeMenu () Metode ini mengontrol ukuran menu sebelum ditampilkan. Elemen menu tersedia di this.menu.element . Metode ini tidak menerima argumen apa pun. _resizeMenu() Metode ini mengontrol ukuran menu sebelum ditampilkan. Elemen menu tersedia di this.menu.element . Metode ini tidak menerima argumen apa pun.

Manajemen Acara di Elemen Pelengkapan Otomatis

Selain metode pelengkapan otomatis (opsi) yang kita lihat di bagian sebelumnya, JqueryUI menyediakan metode peristiwa yang dipicu untuk peristiwa tertentu. Metode acara ini tercantum di bawah -


$( ".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 ) {}
});

Sr.No.	Metode & Deskripsi Acara
1	ubah (acara, ui) Peristiwa ini dipicu ketika nilai elemen <input> diubah berdasarkan pilihan. Saat dipicu, peristiwa ini akan selalu datang setelah peristiwa penutupan dipicu. Event - change(event, ui) Peristiwa ini dipicu ketika nilai elemen <input> diubah berdasarkan pilihan. Saat dipicu, peristiwa ini akan selalu datang setelah peristiwa penutupan dipicu. Dimana event bertipe Event , dan UI bertipe Object . Nilai yang mungkin dari ui adalah - item- Item yang dipilih dari menu, jika ada. Jika tidak, properti tersebut adalah null. Syntax `$( ".selector" ).autocomplete({ change: function( event, ui ) {} });`
2	tutup (acara, ui) Peristiwa ini dipicu setiap kali menu pelengkapan otomatis ditutup. Event - close(event, ui) Peristiwa ini dipicu setiap kali menu pelengkapan otomatis ditutup. Dimana event bertipe Event , dan UI bertipe Object . Syntax `$( ".selector" ).autocomplete({ close: function( event, ui ) {} });`
3	buat (acara, ui) Peristiwa ini dipicu saat pelengkapan otomatis dibuat. Event - create(event, ui) Peristiwa ini dipicu saat pelengkapan otomatis dibuat .. Di mana peristiwa berjenis Peristiwa , dan UI berjenis Objek . Nilai yang mungkin dari ui adalah - item- Item yang dipilih dari menu, jika ada. Jika tidak, properti tersebut adalah null. Syntax `$( ".selector" ).autocomplete({ create: function( event, ui ) {} });`
4	fokus (acara, ui) Peristiwa ini dipicu setiap kali salah satu pilihan menu menerima fokus. Kecuali dibatalkan (misalnya, dengan mengembalikan false), nilai yang difokuskan disetel ke dalam elemen <input>. Event - focus(event, ui) Peristiwa ini dipicu setiap kali salah satu pilihan menu menerima fokus. Kecuali dibatalkan (misalnya, dengan mengembalikan false), nilai yang difokuskan disetel ke dalam elemen <input>. Dimana event bertipe Event , dan UI bertipe Object . Nilai yang mungkin dari ui adalah - item - Item yang difokuskan. Syntax `$( ".selector" ).autocomplete({ focus: function( event, ui ) {} });`
5	buka (acara, ui) Peristiwa ini dipicu setelah data disiapkan dan menu akan dibuka. Event - open(event, ui) Peristiwa ini dipicu setelah data disiapkan dan menu akan dibuka. Dimana event bertipe Event , dan UI bertipe Object . Syntax `$( ".selector" ).autocomplete({ open: function( event, ui ) {} });`
6	respon (acara, ui) Peristiwa ini dipicu setelah pencarian selesai, sebelum menu ditampilkan. Peristiwa ini selalu dipicu saat penelusuran selesai, meskipun menu tidak akan ditampilkan karena tidak ada hasil atau Pelengkapan Otomatis dinonaktifkan. Event - response(event, ui) Peristiwa ini dipicu setelah pencarian selesai, sebelum menu ditampilkan. Peristiwa ini selalu dipicu saat penelusuran selesai, meskipun menu tidak akan ditampilkan karena tidak ada hasil atau Pelengkapan Otomatis dinonaktifkan. Dimana event bertipe Event , dan UI bertipe Object . Nilai yang mungkin dari ui adalah - content - Berisi data respon dan dapat dimodifikasi untuk mengubah hasil yang akan ditampilkan. Syntax `$( ".selector" ).autocomplete({ response: function( event, ui ) {} });`
7	pencarian (acara, ui) Peristiwa ini dipicu setelah penundaan dan kriteria minLength telah dipenuhi, tepat sebelum mekanisme yang ditentukan oleh sumber diaktifkan. Jika dibatalkan, operasi pencarian dibatalkan. Event - search(event, ui) Peristiwa ini dipicu setelah penundaan dan kriteria minLength telah dipenuhi, tepat sebelum mekanisme yang ditentukan oleh sumber diaktifkan. Jika dibatalkan, operasi pencarian dibatalkan. Dimana event bertipe Event , dan UI bertipe Object . Syntax `$( ".selector" ).autocomplete({ search: function( event, ui ) {} });`
8	pilih (acara, ui) Peristiwa ini dipicu ketika nilai dipilih dari menu pelengkapan otomatis. Membatalkan acara ini mencegah nilai ditetapkan ke dalam elemen <input> (tetapi tidak mencegah menu ditutup). Event - select(event, ui) Peristiwa ini dipicu ketika nilai dipilih dari menu pelengkapan otomatis. Membatalkan acara ini mencegah nilai ditetapkan ke dalam elemen <input> (tetapi tidak mencegah menu ditutup). Dimana event bertipe Event , dan UI bertipe Object . Nilai yang mungkin dari ui adalah - item - Objek dengan properti label dan nilai untuk opsi yang dipilih. Syntax `$( ".selector" ).autocomplete({ select: function( event, ui ) {} });`

Contoh

Contoh berikut menunjukkan penggunaan metode acara di widget pelengkapan otomatis. Contoh ini menunjukkan penggunaan fokus acara , dan pilih .

<!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>

Mari kita simpan kode di atas dalam file HTML autocompleteexample.htmdan membukanya di browser standar yang mendukung javascript. Anda juga harus melihat keluaran berikut -