Избегайте фильтрации элементов данных во входном элементе

Мне нужно поведение combo-box в веб-приложении. Я наткнулся на следующее решение:Избегайте фильтрации элементов данных во входном элементе

<input type="text" list="options" > 
 
<datalist id="options" > 
 
    <option>Asterix</option> 
 
    <option>Obelix</option> 
 
</datalist>

Однако, как только вводится какой-либо текст, Firefox и Chrome только показать пользователю те варианты, которые подходят к уже введенному тексту. В примере, как только вход содержит букву «A», браузер предлагает только Asterix, но скрывает Obelix.

Я хотел бы показать пользователю все записи datalist, независимо от того, что написано внутри элемента ввода. Тем не менее, я бы также хотел, чтобы пользовательские входы. В этом примере пользователь должен иметь возможность ввести Methusalix, и когда он это сделает, я бы хотел, чтобы браузер все еще показывал Asterix и Obelix в качестве альтернативы. Как это можно достичь с помощью HTML5? Я бы поспорил, что есть возможность разрешить такое поведение, но я не могу его найти.

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

источник

2017-01-16 Georg

А на ваш вопрос? –

@ Tha'erAl-Ajlouni: Я отредактировал свой вопрос и надеюсь, что теперь стало яснее. – Georg

Вы можете сделать это с индивидуальной реализацией jQuery UI Autocomplete.

В библиотеке используются собственные элементы пользовательского интерфейса, поэтому вы можете изменить поведение выпадающего списка, переопределив методы поиска и/или ответа, чтобы он всегда возвращал ВСЕ элементы.

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>autocomplete demo</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
</head> 
<body> 

<label for="autocomplete">Select: </label> 
<input id="autocomplete"> 

<script> 
var data = [ 
    {label: "Item 1", value: '1'}, 
    {label: "Item 2", value: '2'} 
]; 

$("#autocomplete").autocomplete({ 
    minLength: 0, 
    source: function(request, response) { 
     response(data); 
    }, 
}); 
</script> 

</body> 
</html>

источник

2017-02-02 08:18:31 SpliFF

Хотя jQuery UI Autcomplete работает, кажется, к сожалению, нет настройки для ввода и datalist, чтобы просто отключить автоматическую фильтрацию.Использование jquery-ui представляет новые списки и элементы со специальными классами (ui-menu, ui-menu-item), с которыми мне приходится иметь дело. – crusarovid

Если пользовательский ввод не имеет значения, я не вижу смысла использовать элемент datalist.

Вместо этого вы можете выбрать классический элемент select, который отобразит все параметры (даже если пользователь не сможет ввести текст).

<form> 
 
    <select name="options"> 
 
    <option>Asterix</option> 
 
    <option>Obelix</option> 
 
    </select> 
 
    <br><br> 
 
    <input type="submit"> 
 
</form>

Если у вас есть другое ожидаемое поведение, как показывать варианты, которые совпадают первый, пожалуйста, расширить свой вопрос.

источник

2017-01-24 13:26:16 otorrillas

. Пользовательский ввод не должен иметь значения для параметров, отображаемых браузером, но все равно можно было бы ввести что-либо ранее не в список. – Georg

Способ, которым вы хотите, чтобы предложения появлялись, не описывается спецификацией и не является тем, как автозаполнение или предложения обычно применяются в элементах управления пользовательским интерфейсом.

Как вы полагаете, я думаю, что вы можете делать только то, что хотите, кодируя свой собственный пользовательский интерфейс UI в javascript, не завися от выбора пользовательского агента в отношении пользователя.

источник

2017-01-27 09:56:27 Reego

Хм, я не знаю, что много библиотек пользовательского интерфейса подробно, но Windows API и особенно Windows Forms в .NET имеют это значение по умолчанию для комбинированных полей. – Georg

Избегайте фильтрации элементов данных во входном элементе

ответ

Смежные вопросы