根据返回的记录将字段呈现为 jQuery 自动完成或下拉列表

发布于 2024-12-05 01:44:29 字数 365 浏览 1 评论 0原文

业务要求： 用于上传文档并为来自外部数据库的文档分配属性的表单。有 10 个表单字段，当用户在表单上填写值时，其他字段会被实时过滤。即，如果他们选择“美国”作为国家/地区，则州/省字段仅允许美国各州。

用户体验挑战： 其中许多字段都以数百万个可能的值开始，因此我为它们使用了 jQuery 自动完成功能。当字段被过滤时，可能的选项数量会下降到下拉列表可以更好地提供服务的数量。

问题： 一旦选项数量低于一定数量，有没有办法动态地将 jQuery 自动完成字段更改为下拉框？我查看了 jQuery 自动完成选项，但我不想用超过 100 万条记录填充组合框，即使用户看不到全部记录。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

—━☆沉默づ 2024-12-12 01:44:29

您可以尝试给ul一个明确的高度并将overflow设置为scroll

ul.ui-autocomplete
{
  height: 100px; 
  overflow: scroll; 
}

You could try to give the ul an explicit height and set the overflow to scroll

ul.ui-autocomplete
{
  height: 100px; 
  overflow: scroll; 
}

回复收藏 0 原文

很糊涂小朋友 2024-12-12 01:44:29

我从 UI/UX 角度解决了这个问题。我有一个后台功能，可以让我知道每个字段可用的选项数量。有了这些信息，我可以通过编程方式更改最小长度和延迟选项。我还绑定/取消绑定焦点事件的函数并适当地设置它的样式（感谢@Interstellar_Coder）。这为用户提供了与下拉列表相关的即时响应。

下面是我正在做的事情的简单版本。我使用按钮单击事件来模仿我在实际应用程序中以编程方式执行的操作。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <link href="CSS/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
    <style>
        ul.ui-autocomplete
        {
          height: 100px; 
          overflow: auto; 
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    script type="text/javascript">
        $(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: 1
            });
        });
    </script>

        <script type="text/javascript">
            function acdisplay() {
                $("#tags").autocomplete("option", "minLength", 1);
                $("#tags").autocomplete("option", "delay", 300);
                $('#tags').unbind('focus');
            }

            function ddldisplay() {
                $("#tags").autocomplete("option", "minLength", 0);
                $("#tags").autocomplete("option", "delay", 0);
                $("#tags").bind('focus', function(){
                    $(this).autocomplete("search", this.value);
                });
            }
        </script>
        <div class="demo">
            <div class="ui-widget">
                <label for="tags">Tags: </label>
                <input id="tags" />
            </div>
            <input type="button" id="acDisplay" value="AutoComplete" onclick="acdisplay()" />
            <input type="button" id="ddlDisplay" value="DropDownList" onclick="ddldisplay()" />
        </div>
    </form>
</body>
</html>

I solved the issue for a UI / UX perspective. I have a background function that lets me know the number of options available for each field. With that information I programmatically change the minlength and delay option. I also bind / unbind a function for the focus event and style it (thanks @Interstellar_Coder) appropriately. This gives the user the immediate response associated with a dropdownlist.

Below is simple version of what I'm doing. I'm using button click events to mimic what I'm doing programmatically in my actual application.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <link href="CSS/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
    <style>
        ul.ui-autocomplete
        {
          height: 100px; 
          overflow: auto; 
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    script type="text/javascript">
        $(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: 1
            });
        });
    </script>

        <script type="text/javascript">
            function acdisplay() {
                $("#tags").autocomplete("option", "minLength", 1);
                $("#tags").autocomplete("option", "delay", 300);
                $('#tags').unbind('focus');
            }

            function ddldisplay() {
                $("#tags").autocomplete("option", "minLength", 0);
                $("#tags").autocomplete("option", "delay", 0);
                $("#tags").bind('focus', function(){
                    $(this).autocomplete("search", this.value);
                });
            }
        </script>
        <div class="demo">
            <div class="ui-widget">
                <label for="tags">Tags: </label>
                <input id="tags" />
            </div>
            <input type="button" id="acDisplay" value="AutoComplete" onclick="acdisplay()" />
            <input type="button" id="ddlDisplay" value="DropDownList" onclick="ddldisplay()" />
        </div>
    </form>
</body>
</html>

回复收藏 0 原文

~没有更多了~