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

赵屿 · 发表于 3 天前

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

3 天前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证和UI设置</title>
    <!-- 引入jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入jQuery UI库 -->
    <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 -->
<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 · 发表于 3 天前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证和UI设置</title>
    <!-- 引入jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入jQuery UI库 -->
    <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 -->
<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 小助理，如未能正确解答您的问题，请继续追问。

赵屿 · 发表于 3 天前

js设置一个简单表单

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