根据返回的记录，将字段呈现为jQuery自动完成或下拉列表_Jquery_Jquery Ui_Autocomplete_Drop Down Menu_Jquery Autocomplete

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

jquery jquery-ui autocomplete drop-down-menu

根据返回的记录，将字段呈现为jQuery自动完成或下拉列表,jquery,jquery-ui,autocomplete,drop-down-menu,jquery-autocomplete,Jquery,Jquery Ui,Autocomplete,Drop Down Menu,Jquery Autocomplete,业务需求：表单上载文档并为源于外部数据库的文档分配属性。共有10个表单字段，当用户在表单上填写值时，其他字段将被实时过滤。即，如果他们选择“美国”作为国家，则州/省字段仅允许美国州用户体验挑战：这些字段中的许多字段一开始就有数百万个可能的值，所以我使用jQuery autocomplete来表示它们。在过滤字段时，可能选项的数量会下降到一个下拉列表可以更好地提供服务的数量问题：有没有一种方法可以在选项数降到某个数字以下时动态地将jQuery自动完成字段更改为下拉框？我查看了jQuery

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

用户体验挑战： 这些字段中的许多字段一开始就有数百万个可能的值，所以我使用jQuery autocomplete来表示它们。在过滤字段时，可能选项的数量会下降到一个下拉列表可以更好地提供服务的数量

问题：

有没有一种方法可以在选项数降到某个数字以下时动态地将jQuery自动完成字段更改为下拉框？我查看了jQuery自动完成选项，但我不想在组合框中填充100多万条记录，即使用户看不到所有记录。

您可以尝试给

ul

一个明确的高度，并将

溢出设置为滚动
ul.ui-autocomplete
{
  height: 100px; 
  overflow: scroll; 
}

我解决了UI/UX透视图的问题。我有一个后台函数，可以让我知道每个字段的可用选项数。有了这些信息，我可以通过编程更改minlength和delay选项。我还为焦点事件绑定/解除绑定一个函数，并对其进行适当的样式设置（感谢@Interstellar\u Coder）。这将为用户提供与dropdownlist关联的即时响应
下面是我正在做的简单版本。我使用按钮单击事件来模拟我在实际应用程序中以编程方式所做的事情
<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>


ul.ui-autocomplete
{
高度：100px；
溢出：自动；
}
script type=“text/javascript”>
$（函数（）{
var availableTags=[“ActionScript”、“AppleScript”、“Asp”、“BASIC”、“C”、“C++”、“Clojure”、“COBOL”、“ColdFusion”、“Erlang”、“Fortran”、“Groovy”、“Haskell”、“Java”、“JavaScript”、“Lisp”、“Perl”、“PHP”、“Python”、“Ruby”、“Scala”、“Scheme”]；
$（“#标记”）.autocomplete({
资料来源：availableTags，
最小长度：1
});
});
函数acdisplay（）{
$（“#标记”）.autocomplete（“选项”，“最小长度”，1）；
$（“#标签”）.autocomplete（“选项”，“延迟”，300）；
$（“#标记”）.unbind（'focus'）；
}
函数ddledisplay（）{
$（“#标记”）.autocomplete（“选项”，“最小长度”，0）；
$（“#标记”）.autocomplete（“选项”，“延迟”，0）；
$（“#标记”）.bind（'focus'，function（）{
$（this.autocomplete（“搜索”，this.value）；
});
}
标签：
有一个自动完成的组合框演示：。这部分满足了您的要求吗？不，只是因为它仍然需要下拉列表来保存最初的一百万条记录。这无疑帮助我找到了最终的解决方案。谢谢