Question

业务要求： 表单以上载文档并将属性分配给源自外部数据库的文档。有10个表单字段，当用户填写表单上的值时，其他字段将实时过滤。即如果他们为国家选择“美国”，州/省领域只允许美国各州。

UX挑战： 其中许多字段都以数百万个可能的值开头，因此我使用了jQuery自动完成功能。随着字段的过滤，可能的选项数量会下降到一个由下拉列表提供更好服务的数字。

问题： 有一种方法可以在选项数量低于某个数字时动态地将jQuery自动填充字段更改为下拉框吗？我查看了jQuery自动完成选项，但我不想用100万+记录填充组合框，即使用户不会看到它们。

Answer 1

您可以尝试为ul提供明确的高度，并将overflow设置为scroll

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

Answer 2

我解决了UI / UX透视图的问题。我有一个后台功能，让我知道每个字段可用的选项数量。有了这些信息，我以编程方式更改了minlength和delay选项。我还绑定/取消绑定焦点事件的函数并对其进行样式设置（感谢@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>

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

2 个答案: