Jak utworzyć edytowalną listę rozwijaną w HTML?

Question

Chciałbym utworzyć pole tekstowe z listą rozwijaną, która pozwala użytkownikowi wybrać pewne predefiniowane wartości. Użytkownik powinien również mieć możliwość wpisania nowej wartości lub wyboru predefiniowanego z listy rozwijanej. Wiem, że mogę użyć dwóch widgetów do tego, ale w mojej aplikacji byłoby bardziej ergonomiczne, gdyby było zunifikowane w jednym widżecie.

Czy istnieje standardowy widget lub czy muszę używać zewnętrznego javascript?

Co z przenośnością przeglądarki?

Answer 1

Najlepszym sposobem na zrobienie tego jest prawdopodobnie użycie biblioteki innej firmy.

Istnieje implementacja tego, czego szukasz w jQuery UI i dojo. jQuery jest bardziej popularny, ale dojo pozwala na deklaratywne definiowanie widgetów w HTML, co brzmi bardziej jak to, czego szukasz.

Który z nich będzie używany, zależy od Twojego stylu, ale oba są opracowane do pracy w różnych przeglądarkach i oba będą aktualizowane częściej niż kopiowanie i wklejanie kodu.

Answer 2

Nie jestem pewien, czy jest sposób, aby zrobić to automatycznie bez JavaScriptu.

To, czego potrzebujesz, to coś, co działa po stronie przeglądarki, aby przesłać formularz do serwera, gdy użytkownik dokona wyboru - stąd javascript.

Upewnij się, że masz alternatywne środki (to znaczy przycisk przesyłania) dla tych, którzy mają wyłączony javascript.

Dobrym przykładem: Combo-Box Viewer

miałem nawet bardziej wyrafinowane combo-box wczoraj, z tym dhtmlxCombo, używając ajax pobrać stosowne wartości amongst dużej ilości danych.

Answer 3

Znacznik <select> zezwala tylko na użycie wstępnie zdefiniowanych wpisów. Typowym rozwiązaniem problemu jest umieszczenie jednego wpisu o nazwie "Inne" i wyłączone pole edycji (<input type="text"). Dodaj trochę kodu JavaScript, aby włączyć pole edycyjne tylko po wybraniu "Inne".

Możliwe może być utworzenie menu rozwijanego, które umożliwia bezpośrednią edycję, ale IMO nie jest warte wysiłku. Gdyby tak było, Amazon, Google lub Microsoft by to robili ;-) Po prostu załatwiaj sprawę za pomocą najmniej skomplikowanego rozwiązania. Jest szybszy (twój szef może to lubić) i zwykle łatwiejszy w utrzymaniu (możesz to lubić).

Answer 4

Comobox jest niestety czymś, co zostało pominięte w specyfikacjach HTML.

Jedynym sposobem na to, aby zarządzać, raczej niestety, jest rolowanie własnych lub używanie gotowych. This one wygląda dość prosto. Używam aplikacji this one do aplikacji open source, chociaż niestety musisz płacić za wykorzystanie komercyjne.

Answer 5

Możesz to zrobić, używając tagu <datalist> w HTML5.

<input type="text" name="product" list="productName"/> 
<datalist id="productName"> 
    <option value="Pen">Pen</option> 
    <option value="Pencil">Pencil</option> 
    <option value="Paper">Paper</option> 
</datalist> 

Po dwukrotnym kliknięciu na tekst wejściowy w przeglądarce pojawi się lista z określoną opcją.

Answer 6

Trochę CSS i gotowe fiddle

<div style="position: absolute;top: 32px; left: 430px;" id="outerFilterDiv"> 
<input name="filterTextField" type="text" id="filterTextField" tabindex="2" style="width: 140px; 
    position: absolute; top: 1px; left: 1px; z-index: 2;border:none;" /> 
     <div style="position: absolute;" id="filterDropdownDiv"> 
<select name="filterDropDown" id="filterDropDown" tabindex="1000" 
    onchange="DropDownTextToBox(this,'filterTextField');" style="position: absolute; 
    top: 0px; left: 0px; z-index: 1; width: 165px;"> 
    <option value="-1" selected="selected" disabled="disabled">-- Select Column Name --</option> 
</select> 

Answer 7

ComboBox z TextBox (dla predefiniowanych wartości, jak i wartości zdefiniowanych przez użytkownika.)

ComboBox with TextBox (Click Here)

Answer 8

Bardzo prosta implementacja (tylko podstawowa funkcjonalność) oparta na CSS i jedna linia kodu JS

<div class="dropdown"> 
    <input type="text" /> 
    <select onchange="this.previousElementSibling.value=this.value; this.previousElementSibling.focus()"> 
     <option>This is option 1</option> 
     <option>Option 2</option> 
    </select> 
</div> 

Uwaga: używa previousElementSibling który nie jest obsługiwany in older browsers (below IE9)

.dropdown { 
    position: relative; 
    width: 200px; 
} 
.dropdown select 
{ 
    width: 100%; 
} 
.dropdown > * { 
    box-sizing: border-box; 
    height: 1.5em; 
} 
.dropdown select { 
} 
.dropdown input { 
    position: absolute; 
    width: calc(100% - 20px); 
} 

tutaj jest na JSFiddle

Answer 9

ten może zostać osiągnięty za pomocą zwykły HTML, CSS i JQuery. Stworzyłem stronę próbną:

$(document).ready(function(){ 
 
    
 
    $(".editableBox").change(function(){   
 
     $(".timeTextBox").val($(".editableBox option:selected").html()); 
 
    }); 
 
});

.editableBox { 
 
    width: 75px; 
 
    height: 30px; 
 
} 
 

 
.timeTextBox { 
 
    width: 54px; 
 
    margin-left: -78px; 
 
    height: 25px; 
 
    border: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <select class="editableBox">   
 
     <option value="1">01:00</option> 
 
     <option value="2">02:00</option> 
 
     <option value="3">03:00</option> 
 
     <option value="4">04:00</option> 
 
     <option value="5">05:00</option> 
 
     <option value="6">06:00</option> 
 
     <option value="7">07:00</option> 
 
     <option value="8">08:00</option> 
 
     <option value="9">09:00</option> 
 
     <option value="10">10:00</option> 
 
     <option value="11">11:00</option> 
 
     <option value="12">12:00</option> 
 
     <option value="13">13:00</option> 
 
     <option value="14">14:00</option> 
 
     <option value="15">15:00</option> 
 
     <option value="16">16:00</option> 
 
     <option value="17">17:00</option> 
 
     <option value="18">18:00</option> 
 
     <option value="19">19:00</option> 
 
     <option value="20">20:00</option> 
 
     <option value="21">21:00</option> 
 
     <option value="22">22:00</option> 
 
     <option value="23">23:00</option> 
 
     <option value="24">24:00</option> 
 
    </select> 
 
    <input class="timeTextBox" name="timebox" maxlength="5"/> 
 
</div>