Визуализация поля в виде автозаполнения jQuery или раскрывающегося списка в зависимости от возвращаемых записей - PullRequest
Новая
       23

Визуализация поля в виде автозаполнения jQuery или раскрывающегося списка в зависимости от возвращаемых записей

2 голосов
/ 17 сентября 2011

Бизнес-требования: Форма для загрузки документа и присвоения атрибутам документа, которые получены из внешней базы данных. Существует 10 полей формы, и когда пользователь заполняет значения в форме, остальные поля фильтруются в режиме реального времени. То есть Если они выбирают «Соединенные Штаты» в качестве страны, в поле штата / провинции разрешены только штаты США.

UX Challenge: Многие из этих полей начинаются с буквально миллионов возможных значений, поэтому я использовал для них автозаполнение jQuery. По мере того как поля фильтруются, число возможных вариантов уменьшается до числа, которое будет лучше обслуживаться раскрывающимся списком.

Вопрос: Есть ли способ динамически изменить поле автозаполнения jQuery на раскрывающийся список, когда число опций падает ниже определенного числа? Я посмотрел на опцию автозаполнения jQuery, но не хочу заполнять комбинированный список более чем 1 миллионами записей, даже если пользователь не увидит их все.

Ответы [ 2 ]

1 голос
/ 19 сентября 2011

Я решил проблему для перспективы 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>
1 голос
/ 17 сентября 2011

Вы можете попытаться задать ul явную высоту и установить для overflow значение scroll 

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