jquery输入框提示插件

jQuery 输入框提示插件是一种基于 jQuery 的 JavaScript 插件，用于在用户输入时提供实时的提示信息。这种插件通常用于增强用户体验，减少用户输入错误，并提高数据输入的效率。

基础概念

输入框提示插件通常会在用户输入时，根据输入内容动态显示相关的提示信息。这些提示信息可以是预定义的数据集，也可以是通过 API 请求获取的数据。插件的工作原理通常包括以下几个步骤：

监听输入事件：插件会监听输入框的 keyup 或 keydown 事件。
处理输入内容：当用户输入时，插件会获取输入框的内容，并根据内容生成提示信息。
显示提示信息：插件会在输入框下方或旁边显示一个提示列表，用户可以从中选择。
选择提示信息：用户可以通过键盘或鼠标选择提示信息，插件会将选中的信息填充到输入框中。

类型

本地数据提示：提示信息存储在本地，不需要额外的 API 请求。
远程数据提示：提示信息通过 API 请求从服务器获取。
组合提示：结合本地数据和远程数据，提供更丰富的提示信息。

应用场景

搜索框：在搜索框中提供实时搜索建议。
表单输入：在表单输入框中提供数据验证和提示。
自动补全：在输入框中提供自动补全功能，如地址、电话号码等。

示例代码

以下是一个简单的 jQuery 输入框提示插件的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 输入框提示插件示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .suggestions {
            display: none;
            position: absolute;
            background-color: white;
            border: 1px solid #ccc;
            width: 200px;
        }
        .suggestions div {
            padding: 5px;
            cursor: pointer;
        }
        .suggestions div:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <input type="text" id="input-box">
    <div class="suggestions" id="suggestions"></div>

    <script>
        $(document).ready(function() {
            var data = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];

            $('#input-box').on('keyup', function() {
                var input = $(this).val().toLowerCase();
                var suggestions = [];

                $.each(data, function(index, value) {
                    if (value.toLowerCase().indexOf(input) > -1) {
                        suggestions.push(value);
                    }
                });

                if (suggestions.length > 0) {
                    var html = '';
                    $.each(suggestions, function(index, value) {
                        html += '<div>' + value + '</div>';
                    });

                    $('#suggestions').html(html).show();
                } else {
                    $('#suggestions').hide();
                }
            });

            $(document).on('click', function(event) {
                if (!$(event.target).closest('#input-box').length && !$(event.target).closest('#suggestions').length) {
                    $('#suggestions').hide();
                }
            });

            $('#suggestions').on('click', 'div', function() {
                $('#input-box').val($(this).text());
                $('#suggestions').hide();
            });
        });
    </script>
</body>
</html>

常见问题及解决方法

提示信息显示不正确：
- 原因：可能是数据源有问题，或者数据处理逻辑有误。
- 解决方法：检查数据源是否正确，确保数据处理逻辑无误。

提示信息显示延迟：
- 原因：可能是事件监听器设置不当，或者数据处理逻辑复杂。
- 解决方法：优化事件监听器和数据处理逻辑，减少不必要的计算。
提示信息样式问题：
- 原因：可能是 CSS 样式设置不当。
- 解决方法：检查并调整 CSS 样式，确保提示信息的显示效果符合预期。

通过以上内容，你应该对 jQuery 输入框提示插件有了更全面的了解，并能够解决一些常见问题。

页面内容是否对你有帮助？

有帮助

没帮助

如何修复输入框中允许的输入？

、、、

如何修复输入框中允许的输入？02:10:20我该怎么做呢？

浏览 2提问于2013-01-28得票数 0

3回答

jQuery watermarkinput插件将水印值发布到服务器

、

我正在使用jQuery的watermarkinput插件在文本框输入字段中放置提示文本。当页面回发到服务器时，水印值会以POSTed作为输入框值。如何防止水印取值为POSTed？

浏览 1提问于2009-08-10得票数 7

回答已采纳

2回答

带有自动提示的逗号分隔标签的简单输入框的jQuery插件

、、、

我正在寻找一个具有以下功能的jQuery插件：当用户键入标签时，它应该为用户的输入显示一个自动提示框。有这样的插件吗?如果有的话，我在哪里可以找到它？

浏览 0提问于2011-11-24得票数 10

回答已采纳

2回答

JQuery工具提示插件:显示在页面底部的工具提示

、

我正在使用JQuery工具提示插件- $(".tooltip").tooltip(); 工具提示不是将自己放在它所属的输入框上并使用鼠标进行跟踪，而是将自己放在页面的底部。

浏览 2提问于2009-10-08得票数 2

回答已采纳

4回答

如何通过使用jQuery拖动文本输入框的右下角来使其可调整大小(如文本区)？

、、、、

我想有(最好是在jQuery中)常规的文本输入框，可以点击和拖动它的右下角(例如，像Chrome中的文本区域)，并由用户调整大小？提前谢谢你。编辑:我希望可以像Chrome中的文本区域一样调整大小。

浏览 0提问于2011-12-20得票数 14

回答已采纳

1回答

jQuery -使浮动元素粘连到另一个元素

、、

我正在使用 jQuery表单验证插件。它在一个很小的浮动div中显示了字段错误，这很棒。如何使浮动div紧贴/跟随其对应的元素？这个插件的代码是，示例是。

浏览 3提问于2011-10-06得票数 5

1回答

如何设置jqGrid单元格编辑事件？

、、

我在jqGrid网格中有一个输入框，当用户编辑我的网格中的一行时，它会利用JQuery提示插件向空白输入框添加一些文本。如果用户不修改包含提示文本的文本框，则需要在保存之前删除提示(将文本框还原为空状态)。我假设beforeSaveCell事件就是这样做的，正如所描述的那样。

浏览 3提问于2011-01-19得票数 0

回答已采纳

1回答

jQuery UI Widget工厂中的公共初始化/公共变量？

、、

我有一个成功工作的jQuery UI插件。我想将它转换为jQuery UI。我的当前小部件允许我在所有选定的元素中应用一个初始化。我有多个输入框我的插件出了，并获取了在所有选定的输入框中使用的值列表。现在，我试图在Widget中做同样

浏览 4提问于2014-12-15得票数 0

2回答

如何使用Google +样式的文本输入扩展框

、、、

在G+和Facebook中，当你点击文本输入框(用于更新)时，它会展开并为你提供更多选项。例如提交按钮或另一个文本输入字段。对于我的生活，我找不到什么来命名它，这样我就可以查看一些预先制作好的css3/jquery插件/教程。有什么提示吗？谢谢!

浏览 2提问于2012-05-04得票数 0

2回答

如何通过JavaScript显示错误消息？

、、、

我想我可以用jQuery解决这个问题，但我想知道是否有人有任何建议。谢谢! 如果你转到，点击“注册”，然后点击“创建帐户”(没有输入任何内容)，你就会看到我的目标。

浏览 6提问于2011-02-27得票数 0

回答已采纳

2回答

使用自动建议jQuery插件的多标签

、、、

我使用这个站点上的自动建议jQuery插件：但我的问题是。当从自动提示中进行选择时，它显示在我的输入框中，但我不想再次显示所选的自动提示，就像在link....but中给出的示例一样，我无法做这样的事情... <script type="text/javasc

浏览 3提问于2012-07-24得票数 0

3回答

Javascript -在JS警告框上屏蔽密码

我有以下几点除了在输入密码时显示密码之外，它工作得很好。干杯,

浏览 1提问于2011-02-27得票数 1

1回答

表单输入提示与验证插件冲突

、、

我现在正在尝试向我的输入框添加提示，以便用户在表格长度增加时更容易看到要输入的内容。请注意，“Email”字段是使用验证插件进行验证的。问题是验证插件是基于提示文本进行验证的。我不想手动编写一堆筛选器来与提示文本进行比较，所以我想知道是否有比手动设置$(elem).val()更好的方法来设置提示文本

浏览 0提问于2013-05-22得票数 0

回答已采纳

1回答

Yii2:如何检测数据是否来自键盘或条形码扫描器

、、

也许我会使用一个jQuery插件来检测它。

浏览 0提问于2018-05-04得票数 0

1回答

在动态创建的元素上调用.each的正确方法？

、

根据这里的答案，和现在相当老的jQuery插件() // set stuff here // apply autocomplete plugin to element (this is a jQueryplugin) var ac = $(this).autocom

浏览 3提问于2013-02-12得票数 4

回答已采纳

1回答

如何在刷新时自动过滤基于多列的表而不丢失输入框中的文本？

、、

我目前在代码中使用multifilter (上的jquery插件)。如果您查看该链接，它将向您展示如何实时过滤表。我的问题是，在刷新页面时，输入框中输入的任何文本都会丢失。，如下所示：它将保留输入框中的值但是，它不会在刷新时触

浏览 0提问于2018-07-05得票数 0

回答已采纳

1回答

用于在mozilla插件面板上显示的Jquery工具提示插件。它会影响我的AMO审阅者的审核过程吗？

、、、、

我正在使用jquery工具提示插件在我的插件面板中显示工具提示文本。我在插件中使用的jquery工具提示是轻量级jQuery工具提示插件- TipTip 我的问题是，这会影响AMO审核者对我的插件审查过程吗？

浏览 5提问于2015-10-12得票数 2

3回答

JQuery数据选择器-2输入/文本框

、、、、

两个输入框:当我设置第一个输入框时，我希望第二个输入框的日期比第一个输入框中选择的日期晚一天。我使用的是Keith Wood的jquery插件：。

浏览 0提问于2009-10-06得票数 0

回答已采纳

1回答

推特的jQuery插件，如@ Suggest Dropdown

、

我正在寻找一个类似于推特正在使用的jQuery插件推荐。Twitter.com，输入一些东西，然后输入@aTwitterHandle，你就会在输入框下面的建议列表中得到twitter的用户列表，当你点击或返回其中一个建议时，它会在输入框中输入该用户句柄。有没有什么流行的插件可以做到这一点？谢谢

浏览 1提问于2011-02-23得票数 0

5回答