Unikaj filtrowania elementów danych w elemencie wejściowym

Potrzebuję zachowania pola kombi w aplikacji internetowej. Natknąłem się na następujące rozwiązanie:Unikaj filtrowania elementów danych w elemencie wejściowym

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

jednak tak szybko, jak każdy tekst jest wpisany, Firefox i Chrome pokazać użytkownikowi tylko te opcje, które pasują do już wprowadzonego tekstu. W tym przykładzie, gdy tylko wejście zawiera literę "A", przeglądarka oferuje tylko Asterix jako opcję, ale ukrywa Obelix.

Chciałbym pokazać użytkownikowi wszystkie wpisy danych, niezależnie od tego, co jest napisane w elemencie wejściowym. Chciałbym jednak zezwolić na niestandardowe dane wejściowe. W tym przykładzie użytkownik powinien móc wpisać Methusalix, a kiedy to zrobi, chciałbym, aby przeglądarka nadal pokazywała Asterixa i Obelixa jako alternatywę. Jak można to osiągnąć za pomocą HTML5? Założę się, że jest jakaś możliwość zezwolenia na to zachowanie, ale nie mogę go znaleźć.

Używam tego, aby użytkownik wybrał między wieloma wpisami konfiguracyjnymi. Użytkownik może wybrać z istniejących wpisów konfiguracji lub utworzyć nowy, wpisując nazwę, która jeszcze nie istnieje. Chciałbym jednak umożliwić użytkownikowi powrót do istniejących już w dowolnym momencie, niezależnie od tego, jak nazwał odrzuconą nową.

Źródło

2017-01-16 Georg

Twoje pytanie brzmi? –

@ Tha'erAl-Ajlouni: Poprawiłem moje pytanie i mam nadzieję, że teraz będzie jaśniej. – Georg

Możesz to zrobić za pomocą niestandardowej implementacji jQuery UI Autocomplete.

Biblioteka korzysta z własnych elementów interfejsu użytkownika, dzięki czemu można zmienić zachowanie menu, zastępując metody wyszukiwania i/lub odpowiedzi, aby zawsze zwracać WSZYSTKIE elementy.

<!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>

Źródło

2017-02-02 08:18:31 SpliFF

Mimo że autouzupełnianie jQuery UI działa, wydaje się niefortunne, że nie ma ustawienia dla danych wejściowych i danych, aby po prostu wyłączyć automatyczne filtrowanie.Użycie jquery-ui wprowadza nowe listy i elementy ze specjalnymi klasami (ui-menu, ui-menu-item), którymi mam teraz do czynienia. – crusarovid

Jeśli dane wprowadzane przez użytkownika nie mają znaczenia, nie widzę powodu używania elementu datalist.

Zamiast tego można wybrać klasyczny element select, który pokaże wszystkie opcje (nawet jeśli użytkownik nie będzie mógł wprowadzić tekstu).

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

Jeśli masz inny oczekiwanego zachowania, jak pokazano opcje, które pokrywają pierwsze, należy poszerzyć swoje pytanie.

Źródło

2017-01-24 13:26:16 otorrillas

Wprowadzane przez użytkownika dane nie powinny mieć znaczenia dla opcji wyświetlanych przez przeglądarkę, ale nadal powinno być możliwe wpisanie niczego, czego wcześniej nie było na liście. – Georg

Sposób, w jaki sugestie mają się pojawiać, nie jest opisany w specyfikacji i nie wynika z tego, w jaki sposób autouzupełnianie lub sugestie są zwykle implementowane w kontrolkach interfejsu użytkownika.

Jak sugerujesz, myślę, że możesz robić tylko to, co chcesz, kodując swój własny interfejs sugestii w javascript, nie będąc zależnym od wyboru klienta użytkownika w odniesieniu do wygody użytkownika.

Źródło

2017-01-27 09:56:27 Reego

Hm, nie wiem, że wiele bibliotek interfejsu użytkownika w szczegółach, ale Windows API, a zwłaszcza Windows Forms w .NET mają to jako domyślną opcję dla pól kombinowanych. – Georg

Unikaj filtrowania elementów danych w elemencie wejściowym

Odpowiedz

Powiązane problemy