[已解决]jquery简单表单设置autocomplete

赵屿 · 发表于 2024-12-18 15:27:55

jQuery在H-bulider完整代码能运行

表单验证和UI使用，具体要求如下：
（1）、可以下载第三方插件同时正确引用；
（2）、设置最小值为零和最大值为100；
（3）、设置autocomplete，需要修改源文件，可以在文本框中输入21时显示“21计科U(1)”、“21计科U(2)”、“21计科U(3)”、“21计科U(4)”；
（4）、利用resizable，设置可以动画形式改变大小的div

最佳答案

月排行榜 / 总排行榜

FishC

2024-12-18 15:27:56

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单验证和UI设置</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<form id="myForm">
<label for="numberInput">请输入一个数字（0-100）：</label>
<input type="number" id="numberInput" name="numberInput" min="0" max="100" required>
<br><br>
<label for="autocomplete">自动完成示例：</label>
<input type="text" id="autocomplete" name="autocomplete">
</form>
<div id="resizable" style="width: 150px; height: 150px; background-color: lightblue;">
<p>可调整大小的div</p>
</div>
<script>
$(document).ready(function() {
// 配置autocomplete功能
$('#autocomplete').autocomplete({
source: function(request, response) {
var results = [];
// 当用户输入"21"时，给出以下建议。
if (request.term === "21") {
results = [
"21计科U(1)",
"21计科U(2)",
"21计科U(3)",
"21计科U(4)"
];
}
response(results);
}
});
// 配置resizable功能，并设置动画效果
$('#resizable').resizable({
animate: true
});
});
</script>
</body>
</html>

复制代码

以上代码使用了jQuery和jQuery UI库，实现了一个表单验证和UI功能，其中包括：

1. **数字输入限制**：利用HTML5属性`min`和`max`限制输入值范围为0到100。
2. **Autocomplete插件**：输入框中输入"21"时，会弹出若干个建议项。
3. **可调整大小的div**：通过jQuery UI的`resizable`方法，使div可以动态调整大小，并且使用动画效果。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

跳转到最佳答案楼层

FishC · 发表于 2024-12-18 15:27:56

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单验证和UI设置</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<form id="myForm">
<label for="numberInput">请输入一个数字（0-100）：</label>
<input type="number" id="numberInput" name="numberInput" min="0" max="100" required>
<br><br>
<label for="autocomplete">自动完成示例：</label>
<input type="text" id="autocomplete" name="autocomplete">
</form>
<div id="resizable" style="width: 150px; height: 150px; background-color: lightblue;">
<p>可调整大小的div</p>
</div>
<script>
$(document).ready(function() {
// 配置autocomplete功能
$('#autocomplete').autocomplete({
source: function(request, response) {
var results = [];
// 当用户输入"21"时，给出以下建议。
if (request.term === "21") {
results = [
"21计科U(1)",
"21计科U(2)",
"21计科U(3)",
"21计科U(4)"
];
}
response(results);
}
});
// 配置resizable功能，并设置动画效果
$('#resizable').resizable({
animate: true
});
});
</script>
</body>
</html>

复制代码

以上代码使用了jQuery和jQuery UI库，实现了一个表单验证和UI功能，其中包括：

1. **数字输入限制**：利用HTML5属性`min`和`max`限制输入值范围为0到100。
2. **Autocomplete插件**：输入框中输入"21"时，会弹出若干个建议项。
3. **可调整大小的div**：通过jQuery UI的`resizable`方法，使div可以动态调整大小，并且使用动画效果。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

赵屿 · 发表于 2024-12-18 15:32:29

js设置一个简单表单

账号		自动登录	找回密码
密码			立即注册

[已解决]jquery简单表单设置autocomplete

最佳答案

浏览过的版块