在“选择”/下拉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>