jQuery UI API - anggota AutoComplete (Autocomplete Widget)
kategori
pemakaian
Keterangan: auto-lengkap pencarian dan filter nilai berdasarkan masukan pengguna, yang memungkinkan pengguna untuk dengan cepat menemukan dan memilih dari daftar nilai yang telah ditetapkan.
Versi baru: 1.8
Setiap bidang dapat menerima masukan dapat dikonversi ke Autocomplete, yaitu, <input>
elemen, <textarea>
elemen dan dengan contenteditable
elemen atribut.
Dengan memberikan Autocomplete fokus atau lapangan di mana Anda memasukkan karakter, steker mulai mencari entri yang cocok dan menampilkan daftar nilai alternatif. Dengan memasukkan karakter lainnya, pengguna dapat menyaring daftar untuk mendapatkan pertandingan yang lebih baik.
Komponen dapat digunakan untuk memilih nilai yang dipilih sebelumnya, seperti masukan atau tag Masukan Alamat e-mail dari buku alamat. Autocomplete juga dapat digunakan untuk mengisi informasi yang relevan, seperti masukan nama kota untuk mendapatkan kode ZIP kota.
Anda bisa mendapatkan dari sumber sumber data lokal atau remote: sumber lokal untuk set data kecil, misalnya, buku alamat dengan 50 entri; sumber remote untuk set data yang besar, misalnya, dengan ratusan atau ribuan entri database. Untuk informasi lebih lanjut tentang sumber data kustom, lihat source
pilihan dokumen.
interaksi keyboard
Ketika menu terbuka, perintah keyboard berikut ini tersedia:
- UP - Pindahkan kursor ke item sebelumnya. Jika pada item pertama, kemudian memindahkan fokus ke input (masukan). Jika input (masukan), fokus akan pindah ke item terakhir.
- BAWAH - untuk memindahkan fokus ke item berikutnya. Jika item terakhir, kemudian pindah fokus ke input (masukan). Jika input (masukan), fokus akan pindah ke item pertama.
- ESCAPE - dari menu.
- ENTER - Pilih proyek ini memiliki fokus, dan menutup menu.
- TAB - mendapatkan untuk memilih fokus saat proyek, menutup menu, dan memindahkan fokus ke focusable (focusable) elemen berikutnya.
- PAGE UP / BAWAH - gulir satu proyek layar (berdasarkan ketinggian menu).
Ketika menu ditutup, perintah keyboard berikut ini tersedia:
- UP / BAWAH - jika mereka bertemu
minLength
, kemudian buka menu.
theming
anggota AutoComplete (Autocomplete Widget) menggunakan framework jQuery UI CSS untuk menentukan tampilan dan nuansa dari gaya. Jika Anda perlu menggunakan gaya anggota AutoComplete ditunjuk, Anda dapat menggunakan berikut nama kelas CSS:
-
ui-autocomplete
: untuk mencocokkan tampilan pengguna menu (menu) -
ui-autocomplete-input
: komponen auto-lengkap (Autocomplete Widget) Contoh elemen input.
mengandalkan
- UI inti (UI Core)
- Perpustakaan komponen (Widget Factory)
- Lokasi (Posisi)
- Komponen menu (menu Widget)
informasi tambahan
- bagian membutuhkan beberapa CSS fungsional, jika tidak maka tidak akan bekerja. Jika Anda membuat tema kustom, menggunakan widget yang ditentukan file CSS sebagai titik awal.
- Komponen untuk pemrograman memanipulasi nilai dari elemen, sehingga ketika nilai perubahan elemen tidak memicu asli
change
acara.
navigasi cepat
选项 | 方法 | 扩展点 | 事件 |
---|---|---|---|
选项 | 类型 | 描述 | 默认值 |
---|---|---|---|
appendTo | Selector | 菜单应该被附加到哪一个元素。当该值为 null 时,输入域的父元素将检查 ui-front class。如果找到带有 ui-front class 的元素,菜单将被附加到该元素。如果未找到带有 ui-front class 的元素,不管值为多少,菜单将被附加到 body。 注意:当建议菜单打开时, 代码实例: 初始化带有指定 $( ".selector" ).autocomplete({ appendTo: "#someElem" }); 在初始化后,获取或设置 // getter var appendTo = $( ".selector" ).autocomplete( "option", "appendTo" ); // setter $( ".selector" ).autocomplete( "option", "appendTo", "#someElem" ); |
null |
autoFocus | Boolean | 如果设置为 true ,当菜单显示时,第一个条目将自动获得焦点。代码实例: 初始化带有指定 $( ".selector" ).autocomplete({ autoFocus: true }); 在初始化后,获取或设置 // getter var autoFocus = $( ".selector" ).autocomplete( "option", "autoFocus" ); // setter $( ".selector" ).autocomplete( "option", "autoFocus", true ); |
false |
delay | Integer | 按键和执行搜索之间的延迟,以毫秒计。对于本地数据,采用零延迟是有意义的(更具响应性),但对于远程数据会产生大量的负荷,同时降低了响应性。 代码实例: 初始化带有指定 $( ".selector" ).autocomplete({ delay: 500 }); 在初始化后,获取或设置 // getter var delay = $( ".selector" ).autocomplete( "option", "delay" ); // setter $( ".selector" ).autocomplete( "option", "delay", 500 ); |
300 |
disabled | Boolean | 如果设置为 true ,则禁用该 autocomplete。代码实例: 初始化带有指定 $( ".selector" ).autocomplete({ disabled: true }); 在初始化后,获取或设置 // getter var disabled = $( ".selector" ).autocomplete( "option", "disabled" ); // setter $( ".selector" ).autocomplete( "option", "disabled", true ); |
false |
minLength | Integer | 执行搜索前用户必须输入的最小字符数。对于仅带有几项条目的本地数据,通常设置为零,但是当单个字符搜索会匹配几千项条目时,设置个高数值是很有必要的。 代码实例: 初始化带有指定 $( ".selector" ).autocomplete({ minLength: 0 }); 在初始化后,获取或设置 // getter var minLength = $( ".selector" ).autocomplete( "option", "minLength" ); // setter $( ".selector" ).autocomplete( "option", "minLength", 0 ); |
1 |
position | Object | 标识建议菜单的位置与相关的 input 元素有关系。 of 选项默认为 input 元素,但是您可以指定另一个定位元素。如需了解各种选项的更多细节,请查看 jQuery UI 定位(Position) 。代码实例: 初始化带有指定 $( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } }); 在初始化后,获取或设置 // getter var position = $( ".selector" ).autocomplete( "option", "position" ); // setter $( ".selector" ).autocomplete( "option", "position", { my : "right top", at: "right bottom" } ); |
{ my: "left top", at: "left bottom", collision: "none" } |
source | Array 或 String 或 Function( Object request, Function response( Object data ) ) | 定义要使用的数据,必须指定。 独立于您要使用的变量,标签总是被视为文本。如果您想要标签被视为 html,您可以使用 Scott Gonzalez' html 扩展 。演示侧重于 支持多个类型:
代码实例: 初始化带有指定 $( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] }); 在初始化后,获取或设置 // getter var source = $( ".selector" ).autocomplete( "option", "source" ); // setter $( ".selector" ).autocomplete( "option", "source", [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] ); |
none; must be specified |
方法 | 返回 | 描述 |
---|---|---|
close() | jQuery (plugin only) | 关闭 Autocomplete 菜单。当与 search 方法结合使用时,可用于关闭打开的菜单。
代码实例: 调用 close 方法: $( ".selector" ).autocomplete( "close" ); |
destroy() | jQuery (plugin only) | 完全移除 autocomplete 功能。这会把元素返回到它的预初始化状态。
代码实例: 调用 destroy 方法: $( ".selector" ).autocomplete( "destroy" ); |
disable() | jQuery (plugin only) | 禁用 autocomplete。
代码实例: 调用 disable 方法: $( ".selector" ).autocomplete( "disable" ); |
enable() | jQuery (plugin only) | 启用 autocomplete。
代码实例: 调用 enable 方法: $( ".selector" ).autocomplete( "enable" ); |
option( optionName ) | Object | 获取当前与指定的 optionName 关联的值。
代码实例: 调用该方法: var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" ); |
option() | PlainObject | 获取一个包含键/值对的对象,键/值对表示当前 autocomplete 选项哈希。
代码实例: 调用该方法: var options = $( ".selector" ).autocomplete( "option" ); |
option( optionName, value ) | jQuery (plugin only) | 设置与指定的 optionName 关联的 autocomplete 选项的值。
代码实例: 调用该方法: $( ".selector" ).autocomplete( "option", "disabled", true ); |
option( options ) | jQuery (plugin only) | 为 autocomplete 设置一个或多个选项。
代码实例: 调用该方法: $( ".selector" ).autocomplete( "option", { disabled: true } ); |
search( [value ] ) | jQuery (plugin only) | 触发 search 事件,如果该事件未被取消则调用数据源。当被点击时,可被类似选择框按钮用来打开建议。当不带参数调用该方法时,则使用当前输入的值。可带一个空字符串和 minLength: 0 进行调用,来显示所有的条目。
代码实例: 调用 search 方法: $( ".selector" ).autocomplete( "search", "" ); |
widget() | jQuery | 返回一个包含菜单元素的 jQuery 对象。虽然菜单项不断地被创建和销毁。菜单元素本身会在初始化时创建,并不断的重复使用。
代码实例: 调用 widget 方法: $( ".selector" ).autocomplete( "widget" ); |
扩展点 | 返回 | 描述 |
---|---|---|
自动完成部件(Autocomplete Widget)通过 部件库(Widget Factory) 创建的,且可被扩展。当对部件进行扩展时,您可以重载或者添加扩展部件的行为。下面提供的方法作为扩展点,与上面列出的 插件方法 具有相同的 API 稳定性。如需了解更多有关小部件扩展的知识,请查看 通过部件库(Widget Factory)扩展小部件 . | ||
_renderItem( ul, item ) | jQuery | Method that controls the creation of each option in the widget's menu. The method must create a new <li> element, append it to the menu, and return it. Note: At this time the
代码实例: 添加条目的值作为 _renderItem: function( ul, item ) { return $( "<li>" ) .attr( "data-value", item.value ) .append( $( "<a>" ).text( item.label ) ) .appendTo( ul ); } |
_renderMenu( ul, items ) | jQuery (plugin only) | 该方法负责在菜单显示前调整菜单尺寸。菜单元素可通过 this.menu.element 使用。
代码实例: 添加一个 CSS class 名称到旧的菜单项。 _renderMenu: function( ul, items ) { var that = this; $.each( items, function( index, item ) { that._renderItemData( ul, item ); }); $( ul ).find( "li:odd" ).addClass( "odd" ); } |
_resizeMenu() | jQuery (plugin only) | 该方法负责在菜单显示前调整菜单尺寸。菜单元素可通过 this.menu.element 使用。
代码实例: 菜单总是显示为 500 像素宽。 _resizeMenu: function() { this.menu.element.outerWidth( 500 ); } |
事件 | 类型 | 描述 |
---|---|---|
change( event, ui ) | autocompletechange | 如果输入域的值改变则触发该事件。
代码实例: 初始化带有指定 change 回调的 autocomplete: $( ".selector" ).autocomplete({ change: function( event, ui ) {} }); 绑定一个事件监听器到 autocompletechange 事件: $( ".selector" ).on( "autocompletechange", function( event, ui ) {} ); |
close( event, ui ) | autocompleteclose | 当菜单隐藏时触发。不是每一个 close 事件都伴随着 change 事件。
注意: 代码实例: 初始化带有指定 close 回调的 autocomplete: $( ".selector" ).autocomplete({ close: function( event, ui ) {} }); 绑定一个事件监听器到 autocompleteclose 事件: $( ".selector" ).on( "autocompleteclose", function( event, ui ) {} ); |
create( event, ui ) | autocompletecreate | 当创建 autocomplete 时触发。
注意: 代码实例: 初始化带有指定 create 回调的 autocomplete: $( ".selector" ).autocomplete({ create: function( event, ui ) {} }); 绑定一个事件监听器到 autocompletecreate 事件: $( ".selector" ).on( "autocompletecreate", function( event, ui ) {} ); |
focus( event, ui ) | autocompletefocus | 当焦点移动到一个条目上(未选择)时触发。默认的动作是把文本域中的值替换为获得焦点的条目的值,即使该事件是通过键盘交互触发的。取消该事件会阻止值被更新,但不会阻止菜单项获得焦点。
代码实例: 初始化带有指定 focus 回调的 autocomplete: $( ".selector" ).autocomplete({ focus: function( event, ui ) {} }); 绑定一个事件监听器到 autocompletefocus 事件: $( ".selector" ).on( "autocompletefocus", function( event, ui ) {} ); |
open( event, ui ) | autocompleteopen | 当打开建议菜单或者更新建议菜单时触发。
注意: 代码实例: 初始化带有指定 open 回调的 autocomplete: $( ".selector" ).autocomplete({ open: function( event, ui ) {} }); 绑定一个事件监听器到 autocompleteopen 事件: $( ".selector" ).on( "autocompleteopen", function( event, ui ) {} ); |
response( event, ui ) | autocompleteresponse | 在搜索完成后菜单显示前触发。用于建议数据的本地操作,其中自定义的 source 选项回调不是必需的。该事件总是在搜索完成时触发,如果搜索无结果或者禁用了 Autocomplete,导致菜单未显示,该事件一样会被触发。
代码实例: 初始化带有指定 response 回调的 autocomplete: $( ".selector" ).autocomplete({ response: function( event, ui ) {} }); 绑定一个事件监听器到 autocompleteresponse 事件: $( ".selector" ).on( "autocompleteresponse", function( event, ui ) {} ); |
search( event, ui ) | autocompletesearch | 在搜索执行前满足 minLength 和 delay 后触发。如果取消该事件,则不会提交请求,也不会提供建议条目。
注意: 代码实例: 初始化带有指定 search 回调的 autocomplete: $( ".selector" ).autocomplete({ search: function( event, ui ) {} }); 绑定一个事件监听器到 autocompletesearch 事件: $( ".selector" ).on( "autocompletesearch", function( event, ui ) {} ); |
select( event, ui ) | autocompleteselect | 当从菜单中选择条目时触发。默认的动作是把文本域中的值替换为被选中的条目的值。取消该事件会阻止值被更新,但不会阻止菜单关闭。
代码实例: 初始化带有指定 select 回调的 autocomplete: $( ".selector" ).autocomplete({ select: function( event, ui ) {} }); 绑定一个事件监听器到 autocompleteselect 事件: $( ".selector" ).on( "autocompleteselect", function( event, ui ) {} ); |
contoh
Contoh 1:Sebuah sederhana jQuery UI auto-completion (Autocomplete).
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> anggota AutoComplete (Autocomplete Widget) Demo </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> </ Kepala> <Body> <Label untuk = "autocomplete"> pilih bahasa pemrograman: </ label> <Input id = "autocomplete"> <Script> $ ( "#autocomplete") .autocomplete ({ Sumber: [ "c ++", "java", "php", "ColdFusion", "javascript", "asp", "ruby"] }); </ Script> </ Body> </ Html>Contoh 2:
Mulai menggunakan koreksi sumber kustom sesuai dengan kondisi.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> anggota AutoComplete (Autocomplete Widget) Demo </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> </ Kepala> <Body> <Label untuk = "autocomplete"> pilih bahasa pemrograman: </ label> <Input id = "autocomplete"> <Script> tags var = [ "c ++", "java", "php", "ColdFusion", "javascript", "asp", "ruby"]; $ ( "#autocomplete") .autocomplete ({ Sumber: function (permintaan, respon) { var matcher = RegExp baru ( "^" + $ .ui.autocomplete.escapeRegex (request.term), "i"); respon ($ .grep (tag, fungsi (item) { kembali matcher.test (item); })); } }); </ Script> </ Body> </ Html>