在「選擇」/下拉HTML列表中手動輸入值？

Question

在Windows窗體應用程序，一個下拉選擇列表還爲用戶提供了輸入一個替代值到同場的選項（假設開發者已經離開了這個選項上的控制功能。）

如何做一在HTML中完成這項工作？它看起來好像只能從列表中選擇值。

如果不可能用直線HTML做到這一點，有沒有辦法用Javascript做到這一點？

Answer 1

ExtJS具有ComboBox控件可以做這件事（和其他有趣的東西！一大堆）

編輯：瀏覽所有的控件等，在這裏：http://www.sencha.com/products/js/

Answer 2

做到這一點，最簡單的方法是使用jQuery：jQuery UI combobox/autocomplete

Answer 3

Telerik還有一個組合框控件。從本質上講，它是一個包含圖像的文本框，當您點擊它們時，將顯示一個包含預定義選項列表的面板。

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

但這是AJAX，所以它可能比你想在您的網站（因爲你說這是「HTML」）一個更大的足跡。

Answer 4

另一個常見的解決方案是向下拉菜單中添加「Other ..」選項，並在選定的顯示文本框中添加其他內容。然後，在提交表單時，使用下拉列表或文本框值分配隱藏字段值，並在服務器端代碼中檢查隱藏值。

實施例：http://jsfiddle.net/c258Q/

HTML代碼：

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; 
} 

而在服務器側，從所述請求讀 「水果」 的值。

Answer 5

我喜歡Shadow Wizard的答案，它可以很好地回答這個問題。 我對這個我使用jQuery扭曲在這裏。 http://jsfiddle.net/UJAe4/

輸入新值後，表單準備發送，只需要處理後端的新值。

jQuery是：

(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)); 

因此，在應用這下面的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> 

就像這樣：

$(function() { 

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

}); 

Answer 6

任何尋找一個簡單的jQuery的解決方案，而無需在jQuery UI自動完成網站上實現所有這些瘋狂的行爲，請看這裏：

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

這個人基本上創建在jQuery的用戶界面示例中使用的組合框設置的延伸部。他還擴大了一點。

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

Answer 7

我面臨同樣的基本問題：想這是從根本上的HTML規範不同的東西一個文本框的功能和選擇框結合

只是調用它。

的好消息是，selectize.js正是這樣做的：

Selectize是一個文本框，框的混合體。它基於jQuery，對標記，聯繫人列表，國家選擇器等非常有用。

Answer 8

它現在可以用HTML5

做

在這裏看到這個帖子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>