Ręczne wpisanie wartości na liście "Wybierz"/Lista rozwijana HTML?

Question

W aplikacji Windows Forms, wykaz selektor rozwijana również daje użytkownikowi możliwość wpisywania wartości alternatywną do tej samej dziedziny (zakładając, że deweloper opuścił tę opcję włączoną w sprawie kontroli).

w jaki sposób można osiągnąć to w HTML? Wydaje się, że możliwe jest tylko wybieranie wartości z listy.

Jeśli nie można tego zrobić za pomocą prostego kodu HTML, czy jest jakiś sposób, aby to zrobić w JavaScript?

Answer 1

ExtJS ma kontroli ComboBox, które mogą to zrobić (i całe mnóstwo innych fajnych rzeczy !!)

EDIT: Zobaczyć wszystkie kontrole itp, tutaj: http://www.sencha.com/products/js/

Answer 2

Najprostszym sposobem na to jest Aby użyć jQuery: jQuery UI combobox/autocomplete

Answer 3

Telerik ma również kontrolkę pola kombi. Zasadniczo jest to pole tekstowe z obrazkami, które po kliknięciu otwierają panel z listą wstępnie zdefiniowanych opcji.

http://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx

Ale to jest AJAX, więc może mieć większy ślad niż chcesz na swojej stronie internetowej (ponieważ można powiedzieć, że to „HTML”).

Answer 4

Innym powszechnym rozwiązaniem jest dodanie opcji "Inne ..." do rozwijanego menu, a po zaznaczeniu tego pola tekstowego zostanie ukryte. Następnie, przesyłając formularz, przypisz wartość pola ukrytego z wartością dropdown lub textbox, aw kodzie strony serwera sprawdź ukrytą wartość.

Przykład: http://jsfiddle.net/c258Q/

HTML kod:

Please select: <form onsubmit="FormSubmit(this);"> 
<input type="hidden" name="fruit" /> 
<select name="fruit_ddl" onchange="DropDownChanged(this);"> 
    <option value="apple">Apple</option> 
    <option value="orange">Apricot </option> 
    <option value="melon">Peach</option> 
    <option value="">Other..</option> 
</select> <input type="text" name="fruit_txt" style="display: none;" /> 
<button type="submit">Submit</button> 
</form> 

JavaScript:

function DropDownChanged(oDDL) { 
    var oTextbox = oDDL.form.elements["fruit_txt"]; 
    if (oTextbox) { 
     oTextbox.style.display = (oDDL.value == "") ? "" : "none"; 
     if (oDDL.value == "") 
      oTextbox.focus(); 
    } 
} 

function FormSubmit(oForm) { 
    var oHidden = oForm.elements["fruit"]; 
    var oDDL = oForm.elements["fruit_ddl"]; 
    var oTextbox = oForm.elements["fruit_txt"]; 
    if (oHidden && oDDL && oTextbox) 
     oHidden.value = (oDDL.value == "") ? oTextbox.value : oDDL.value; 
} 

A po stronie serwera, odczytać wartość "owoc" z żądania.

Answer 5

Uwielbiam odpowiedź Czarodzieja Cienia, która dokładnie odpowiada na pytanie całkiem nieźle. Mój jQuery twist na tym, którego używam jest tutaj. http://jsfiddle.net/UJAe4/

Po wpisaniu nowej wartości formularz jest gotowy do wysłania, wystarczy zająć się nowymi wartościami z tyłu.

jQuery jest:

(function ($) 
{ 
$.fn.otherize = function (option_text, texts_placeholder_text) { 
    oSel = $(this); 
    option_id = oSel.attr('id') + '_other'; 
    textbox_id = option_id + "_tb"; 

    this.append("<option value='' id='" + option_id + "' class='otherize' >" + option_text + "</option>"); 
    this.after("<input type='text' id='" + textbox_id + "' style='display: none; border-bottom: 1px solid black' placeholder='" + texts_placeholder_text + "'/>"); 
    this.change(

    function() { 
     oTbox = oSel.parent().children('#' + textbox_id); 
     oSel.children(':selected').hasClass('otherize') ? oTbox.show() : oTbox.hide(); 
    }); 

    $("#" + textbox_id).change(

    function() { 
     $("#" + option_id).val($("#" + textbox_id).val()); 
    }); 
}; 
}(jQuery)); 

więc zastosować to do poniższej HTML:

<form> 
    <select id="otherize_me"> 
     <option value=1>option 1</option> 
     <option value=2>option 2</option> 
     <option value=3>option 3</option> 
    </select> 
</form> 

Właśnie tak:

$(function() { 

    $("#otherize_me").otherize("other..", "put new option vallue here"); 

}); 

Answer 6

Kto szuka proste rozwiązanie jQuery bez konieczności aby wprowadzić wszystkie szaleństwa w stronę autouzupełniania interfejsu użytkownika jQuery, patrz tutaj:

http://www.benknowscode.com/2013/03/finishing-jquery-ui-autocomplete_4743.html

Ten facet w zasadzie stworzył rozszerzenie do konfiguracji combobox stosowanego w przykładzie jQuery UI. On również nieco ją rozszerzył.

Wystarczy zadzwonić go z:

$('.your-select-element').combobox(); 

Answer 7

I w obliczu tego samego podstawowego problemu: staram się łączyć funkcjonalność tekstowym i wybierz pole, które są zasadniczo różne rzeczy w specyfikacji html.

Dobrą wiadomością jest to, że robi dokładnie to selectize.js:

Selectize jest hybrydą polu tekstowym i pudełko. Jest oparty na jQuery i jest przydatny do tagowania, list kontaktów, selektorów krajów i tak dalej.

Answer 8

Można to zrobić teraz z HTML5

Zobacz ten post tutaj HTML select form with option to enter custom value

<input type="text" list="cars" /> 
<datalist id="cars"> 
    <option>Volvo</option> 
    <option>Saab</option> 
    <option>Mercedes</option> 
    <option>Audi</option> 
</datalist>