请看下面的完整攻略。
详解jQuery UI库中文本输入自动补全功能的用法
介绍
jQuery UI库是一个基于jQuery的Web前端JavaScript库，提供了丰富的UI组件和交互效果，其中包括文本输入自动补全功能。该功能可以在输入框中输入关键词的时候，根据预设的数据源，自动显示匹配的结果列表，用户可以选择或键入特定项。
使用步骤
- 引入jQuery和jQuery UI库的js和css文件。例如：
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
- 设置输入框的autocomplete属性为"on"。例如：
<input type="text" name="input1" autocomplete="on">
- 准备数据源。数据源可以是本地数组，也可以是远程数据。例如：
var data = ["Java", "JavaScript", "Python", "Ruby", "PHP", "C++"];
- 调用autocomplete函数。例如：
$( "input[name='input1']" ).autocomplete({
source: data
});
其中，source属性指定了数据源，可以是一个数组或一个返回数据的函数。
示例
下面是两个简单的示例：
示例1：使用本地数组作为数据源
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例1：使用本地数组作为数据源</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<h1>示例1：使用本地数组作为数据源</h1>
<input type="text" name="input1" autocomplete="on">
<script>
var data = ["Java", "JavaScript", "Python", "Ruby", "PHP", "C++"];
$( "input[name='input1']" ).autocomplete({
source: data
});
</script>
</body>
</html>
示例2：使用远程数据作为数据源
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例2：使用远程数据作为数据源</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<h1>示例2：使用远程数据作为数据源</h1>
<input id="input2" type="text" name="input2" autocomplete="on">
<script>
$( "input[name='input2']" ).autocomplete({
source: function(request, response) {
$.ajax({
url: "https://api.github.com/search/repositories",
dataType: "json",
data: {
q: request.term
},
success: function(data) {
response(data.items.map(item => item.full_name));
}
});
},
minLength: 2
});
</script>
</body>
</html>
在这个示例中，我们使用了GitHub的公开API作为数据源，根据输入的关键词，返回了与该关键词相关的GitHub项目的名称。由于该API需要授权才能访问，因此我们只做了一个简单的演示，限制了最小输入长度为2个字符。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解jQuery UI库中文本输入自动补全功能的用法 - Python技术站
微信扫一扫 
支付宝扫一扫 