本文概述
- 第一种方法
- jQuery UI autocomplete()示例1
- jQuery UI autocomplete()方法示例2
- jQuery UI autocomplete()方法示例3
- jQuery UI autocomplete()方法示例4
jQueryUI提供了一个自动完成小部件, 通过在文本框中提供一系列建议来方便用户。它是一个非常类似于< select> 下拉列表的控件, 但是过滤选择以仅显示与用户在控件中键入内容匹配的选项。
【jQuery UI自动完成】句法：
你可以两种形式使用autocomplete()方法：
$(selector, context).autocomplete (options) Method$(selector, context).autocomplete ("action", params) Method第一种方法自动完成（选项）方法指定必须将HTML < input> 元素作为输入字段进行管理, 该元素将显示在建议列表上方。这里的options参数是一个对象, 用于指定用户在输入字段中键入内容时建议列表的行为。
句法：
$(selector, context).autocomplete (options);
你可以使用JavaScript对象一次使用一个或多个选项。如果有多个选项, 则必须使用逗号将它们分开, 如下所示：
$(selector, context).autocomplete({option1: value1, option2: value2..... });
以下是可与该方法一起使用的不同选项的列表：
| 选项 | 描述 |
|---|---|
| appendTo | 此选项用于将元素添加到菜单。默认情况下, 其值为null。 |
| autoFocus | 如果将此选项设置为TRUE, 则显示菜单时, 菜单的第一项将自动聚焦。默认情况下, 其值为FALSE。 |
| delay | 此选项指定尝试获取匹配值之前等待的时间（以毫秒为单位）（由source选项指定）。默认情况下, 其值为300。 |
| disabled | 如果将此选项设置为true, 则最初将禁用自动完成小部件。默认情况下, 其值为false。 |
| minlength | 它指定尝试获取匹配值之前必须输入的字符数（由source选项指定）。默认情况下, 其值为1。 |
| position | 此选项根据输入元素标识建议菜单的位置。默认情况下, 其值为{my：“ left top”, at：“ left bottom”, 碰撞：“ none”}。 |
| source | 此选项指定获取与输入数据匹配的数据的方式。你必须提供一个值, 否则将不会创建自动完成小部件。默认情况下, 其值为none；必须指定。 |
<
!doctype html>
<
html lang="en">
<
head>
<
meta charset="utf-8">
<
title>
jQuery UI Autocomplete - Default functionality<
/title>
<
link rel="stylesheet" href="http://www.srcmini.com//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<
script src="http://www.srcmini.com//code.jquery.com/jquery-1.10.2.js">
<
/script>
<
script src="http://www.srcmini.com//code.jquery.com/ui/1.11.4/jquery-ui.js">
<
/script>
<
link rel="stylesheet" href="http://www.srcmini.com/resources/demos/style.css">
<
script>
$(function() {
var availableTags = [
"ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
<
/script>
<
/head>
<
body>
<
div class="ui-widget">
<
p>
Available Courses:<
/p>
<
label for="tags">
Tags: <
/label>
<
input id="tags">
<
/div>
<
/body>
<
/html>
立即测试
jQuery UI autocomplete()方法示例2在jQueryUI中使用autoFocus autocomplete()方法：
让我们以一个示例来演示自动完成方法中选项autoFocus的用法。
<
!doctype html>
<
html lang="en">
<
head>
<
meta charset="utf-8">
<
title>
jQuery UI Autocomplete - Default functionality<
/title>
<
link rel="stylesheet" href="http://www.srcmini.com//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<
script src="http://www.srcmini.com//code.jquery.com/jquery-1.10.2.js">
<
/script>
<
script src="http://www.srcmini.com//code.jquery.com/ui/1.11.4/jquery-ui.js">
<
/script>
<
link rel="stylesheet" href="http://www.srcmini.com/resources/demos/style.css">
<
script>
$(function() {
var availableTags = [
"ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
autofocus:true
});
});
<
/script>
<
/head>
<
body>
<
div class="ui-widget">
<
label for="tags">
Tags: <
/label>
<
input id="tags">
<
/div>
<
/body>
<
/html>
立即测试
jQuery UI autocomplete()方法示例3在jQueryUI中使用minLength和delay的autocomplete()方法：
让我们以一个示例来演示jQueryUI autocomplete()方法中两个选项minLength和delay的用法。
<
!doctype html>
<
html lang="en">
<
head>
<
meta charset="utf-8">
<
title>
jQuery UI Autocomplete - Default functionality<
/title>
<
link rel="stylesheet" href="http://www.srcmini.com//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<
script src="http://www.srcmini.com//code.jquery.com/jquery-1.10.2.js">
<
/script>
<
script src="http://www.srcmini.com//code.jquery.com/ui/1.11.4/jquery-ui.js">
<
/script>
<
link rel="stylesheet" href="http://www.srcmini.com/resources/demos/style.css">
<
script>
$(function() {
var availableTags = [
"ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
minLength:2, delay:500, });
});
<
/script>
<
/head>
<
body>
<
div class="ui-widget">
<
p>
Type two letter for e.g:ja, sc etc<
/p>
<
p>
Available Courses:<
/p>
<
label for="tags">
Tags: <
/label>
<
input id="tags">
<
/div>
<
/body>
<
/html>
立即测试
jQuery UI autocomplete()方法示例4在jQueryUI中使用lable autocomplete()方法：
让我们以一个示例来演示jQueryUI的自动完成小部件中选项标签的用法：
<
!doctype html>
<
html lang="en">
<
head>
<
meta charset="utf-8">
<
title>
jQuery UI Autocomplete functionality<
/title>
<
link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<
script src="http://img.readke.com/220430/0003252G8-6.jpg">
<
/script>
<
script src="http://img.readke.com/220430/0003251033-7.jpg">
<
/script>
<
!-- Javascript -->
<
script>
$(function() {
$( "#autocomplete-4" ).autocomplete({
source: [
{ label: "India", value: "IND" }, { label: "America", value: "USA" }, { label: "Pakistan", value: "PAK" }, { label: "Iceland", value: "ICE" }, { 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>
立即测试
