의 jQuery UI의 API - 자동 완성 부재 (자동 완성 위젯)
범주
용법
설명 : 사용자 입력에 따라 자동 완성 검색 및 필터 값, 사용자가 신속하게 찾아 사전 설정 값 목록에서 선택할 수 있습니다.
새로운 버전 : 1.8
입력을받을 수있는 모든 필드가 자동 완성으로 변환 할 수 있습니다, 즉, <input>
요소, <textarea>
요소와 함께 contenteditable
요소는 속성.
자동 완성 초점을하거나 문자를 입력하는 필드를 제공함으로써, 플러그 일치하는 항목을 검색 및 대체 값 목록을 표시하기 시작했다. 더 많은 문자를 입력하면, 사용자는 더 나은 경기를 얻을 수있는 목록을 필터링 할 수 있습니다.
컴포넌트들은 예를 들면 주소록 입력 또는 태그 입력 어드레스에 이메일 주소로 이전에 선택된 값을 선택하는데 사용될 수있다. 자동 완성은 도시의 이름은 도시의 우편 번호를 얻을 수있는 등의 입력으로 관련 정보를 채우는 데 사용 될 수있다.
로컬 또는 원격 소스 데이터 소스로부터 얻을 수있다 : 작은 데이터 세트에 대한 로컬 소스, 예를 들어 50 엔트리와 주소록, 예를 들면 대형의 데이터 세트에 대한 원격 소스, 수백 또는 수천 데이터베이스 항목. 사용자 정의 데이터 소스에 대한 자세한 내용은 참조 source
문서 옵션을.
키보드 상호 작용
메뉴가 열려있는 경우, 다음과 같은 키보드 명령을 사용할 수있다 :
- UP - 이전 항목으로 커서를 이동합니다. 첫 번째 항목의 경우, 입력 (입력)에 포커스를 이동합니다. 입력 (입력)하면, 초점은 마지막 항목으로 이동합니다.
- DOWN - 다음 항목으로 포커스를 이동합니다. 마지막 항목이면 입력 (Input)로 포커스를 이동한다. 입력 (입력)하면, 초점은 첫 번째 항목으로 이동합니다.
- ESCAPE - 메뉴 떨어져.
- ENTER - 현재 프로젝트에 포커스가 선택하고 메뉴를 닫습니다.
- TAB는 - 프로젝트의 현재 포커스를 선택하고 메뉴를 종료하고, 다음 포커스 (포커스) 요소에 포커스를 이동하세요.
- 페이지 UP / DOWN - (메뉴의 높이 기준) 한 화면 프로젝트를 스크롤합니다.
메뉴가 닫히면, 다음 키보드 명령을 사용할 수있다 :
- UP / DOWN - 그들은 충족하는 경우
minLength
한 다음 메뉴를 엽니 다.
테마
사용하여 자동 완성 부재 (자동 완성 위젯) jQuery를 UI CSS 프레임 워크를 그 스타일의 모양과 느낌을 정의 할 수 있습니다. 당신이 자동 완성 멤버 지정 스타일을 사용해야하는 경우, 다음과 같은 CSS 클래스 이름을 사용할 수 있습니다 :
-
ui-autocomplete
: 사용자의 표시에 맞게 메뉴 (메뉴) -
ui-autocomplete-input
: 입력 요소의 자동 완성 구성 요소 (자동 완성 위젯) 예.
의존
추가 정보
- 부분은 그렇지 않으면 작동하지 않습니다, 일부 기능 CSS가 필요합니다. 맞춤 테마를 작성하는 경우, 시작점으로 지정된 위젯 CSS 파일을 사용한다.
- 요소의 값이 변경 네이티브 실행되지 않는 경우에 있도록 프로그래밍 요소의 요소 값을 조작
change
이벤트.
빠른 탐색
选项 | 方法 | 扩展点 | 事件 |
---|---|---|---|
选项 | 类型 | 描述 | 默认值 |
---|---|---|---|
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 ) {} ); |
예
실시 예 1 :간단한 jQuery를 UI 자동 완성 기능 (자동 완성).
<! DOCTYPE html로> <HTML LANG = "EN"> <헤드> <메타 문자 집합 = "UTF-8"> <제목> 자동 완성 부재 (자동 완성 위젯) 데모 </ 제목> <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <스크립트 SRC = "// code.jquery.com/jquery-1.10.2.js"> </ script> <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> </ 헤드> <바디> </ 라벨> : 프로그래밍 언어를 선택하고 <= "자동 완성"에 대한 라벨> <입력 한 id = "자동 완성"> <스크립트> $ ( "#autocomplete") .autocomplete ({ 소스 : [ "C ++", "자바" 'PHP', 'ColdFusion에서 ","스크립트 ","ASP ","루비 "] }); </ 스크립트> </ BODY> </ HTML>실시 예 2 :
조건과 일치하는 주문 공급원 보정을 사용하여 시작한다.
<! DOCTYPE html로> <HTML LANG = "EN"> <헤드> <메타 문자 집합 = "UTF-8"> <제목> 자동 완성 부재 (자동 완성 위젯) 데모 </ 제목> <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <스크립트 SRC = "// code.jquery.com/jquery-1.10.2.js"> </ script> <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> </ 헤드> <바디> </ 라벨> : 프로그래밍 언어를 선택하고 <= "자동 완성"에 대한 라벨> <입력 한 id = "자동 완성"> <스크립트> VAR 태그 = "C ++", "자바" 'PHP', 'ColdFusion에서 ","스크립트 ","ASP ","루비 "]; $ ( "#autocomplete") .autocomplete ({ 출처 : 기능 (요청, 응답) { var에 정규 = 새로운 정규식 ( "^"+ $ .ui.autocomplete.escapeRegex (request.term), "I"); 응답 ($의 .grep (태그, 기능 (항목) { matcher.test (항목)을 반환; })); } }); </ 스크립트> </ BODY> </ HTML>