Текстовое поле с выпадающими предложениями - PullRequest
Новая
       35

Текстовое поле с выпадающими предложениями

7 голосов
/ 01 октября 2009

В настоящее время у меня есть раскрывающийся список с привязкой к данным на моем веб-сайте ASP.Net C # 2.0, в котором содержится около 400 элементов. Я хочу заменить его чем-то похожим на текстовое поле в поиске Google, где вы вводите букву, и всплывают только записи, начинающиеся с этих букв

каков хороший способ его реализации? Есть ли уже существующие элементы управления, которые кто-нибудь может предложить?

Ответы [ 6 ]

10 голосов
/ 01 октября 2009

Взгляните на http://docs.jquery.com/Plugins/Autocomplete

Также здесь есть учебник для использования с ASP.Net

9 голосов
/ 10 ноября 2016

Один из способов сделать это с помощью HTML5 (конечно, для небольших наборов данных) - datalist: 

<input list="users" name="users">
  <datalist id="users">
    <option value="Alice">
    <option value="Bob">
    <option value="Chuck">
    <option value="Chris">
    <option value="Duke">
    <option value="Emily">
  </datalist>

Для больших наборов данных лучше использовать AJAX.

4 голосов
/ 04 февраля 2014

проверка завершена тоже

http://complete -ly.appspot.com /

не имеет зависимостей и очень мало весит.

1 голос
/ 01 октября 2009

Имеется расширение AutoComplete , как и в прошлом AJAX Control Toolkit для ASP.NET. Существует множество различных опций, которые вы можете установить для кэширования клиента, интервала задержки. Просто укажите на веб-сервис или метод страницы, и все - и все.

1 голос
/ 01 октября 2009

Если это известные enrties, вы можете использовать JQuery и для события OnUpdate:

  1. если это длинный список, отправьте Ajax Request на ваш веб-сервер, найдите лучший вариант
  2. если это короткий список, вы можете загрузить все параметры на страницу и предлагать дополнительные тексты, не отправляя запрос на сервер.

Изучите библиотеку JQuery для реализации того, как отобразить предложение.

0 голосов
/ 26 августа 2015

TextBoxValueToDropDownList 

    function AddNames(text) {

        if (document.myForm.insertText.value == "") {
            document.getElementById("insertText").style.border = "1px solid red";
            return false;
        }
        else {
            var option = document.createElement("OPTION");
            option.text = text.value;
            option.value = text.value;
            document.getElementById("dropDownList").options.add(option);
            document.myForm.insertText.value = "";
            document.getElementById("insertText").style.border = "1px solid green";
        }
    }




    <form name="myForm">
        <table>
            <tr>
                <td>
                    <input type="text" name="insertText" id="insertText" /></td>
                <td></td>
                <td>
                    <select name="dropDown" id="dropDownList">
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="Insert" id="button" onclick="AddNames(insertText);" /></td>
            </tr>
        </table>
    </form>
...