Home/ Questions/Q 6576427
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T15:30:39+00:00

Business Requirement: Form to upload a document and assign attributes to the document that

  • 0

Business Requirement:
Form to upload a document and assign attributes to the document that are sourced from an external database. There are 10 form fields and as the user fills in values on the form, the other fields are filtered in real time. I.e. If they select “United States” for country, the state / province field only allows US states.

UX Challenge:
Many of these fields start off with literally millions of possible values so I used jQuery autocomplete for them. As the fields are filtered the number of possible options drop to a number that would be better serviced by a drop-down list.

Question:
Is there a way to dynamically change a jQuery autocomplete field to a dropdown box once the number of options drop below a certain number? I looked at the jQuery autocomplete option but I don’t want to fill a combobox with 1 million+ records even if the user won’t see them all.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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