Combined HTML with Entry Capability

Question

I had the impression that you can enter into the combo box in addition to selecting any values ​​that are already in the list. However, I can not find information on how to do this. Is there a property that I need to add to allow text to print?

Answer 1

Before the datalist (see note below), you must provide an additional input element so that people can enter their own parameters.

 <select name="example"> <option value="A">A</option> <option value="B">A</option> <option value="-">Other</option> </select> <input type="text" name="other"> 

This mechanism works in all browsers and does not require JavaScript .

You can use a bit of JavaScript to be smart in displaying input only if the "Other" option has been selected.

data item

The datalist designed to provide a better mechanism for this concept. It is important to note that it does not support Safari, iOS Safari or Opera Mini. The implementation of Internet Explorer also has some problems. This information is out of date, so check Can I use to see the current data list support for more recent information. (This is supported by iOS Safari ≥ 12.2)

 <input type="text" name="example" list="exampleList"> <datalist id="exampleList"> <option value="A"> <option value="B"> </datalist> 

Answer 2

in HTML you do it backwards: you define the input of the text and attach a list of data to it. (note the list of input attributes).

 <input type="text" list="browsers" /> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> 

Answer 3

This link can help you: http://www.scriptol.com/html5/combobox.php

You have two examples. One in html4, the other in html5

HTML5

 <input type="text" list="browsers"/> <datalist id="browsers"> <option>Google</option> <option>IE9</option> </datalist> 

HTML4

  <input type="text" id="theinput" name="theinput" /> <select name="thelist" onChange="combo(this, 'theinput')"> <option>one</option> <option>two</option> <option>three</option> </select> 

  function combo(thelist, theinput) { theinput = document.getElementById(theinput); var idx = thelist.selectedIndex; var content = thelist.options[idx].innerHTML; theinput.value = content; } 

Answer 4

The dojo example here does not work when applied to existing code in most cases. So I had to find the alternative found here - hxxp: //technologymantrablog.com/how-to-create-a-combo-box-with-text-input-jquery-autocomplete/ (now points to a spam site or worse)

archive.org (not very useful)

Here is jsfiddle - https://jsfiddle.net/ze7fgby7/

Answer 5

Well, this is 2016, and there is still no easy way to make combos ... I'm sure we have a datalist, but without safari / ios support it is not very useful. At least we have ES6 .. below is an attempt at a combo class that wraps a div or span, turning it into a combo, putting an input field on top of the selection and binding the corresponding events.

see code at: https://github.com/kofifus/Combo

(the code uses the class template from https://github.com/kofifus/New )

Creating combos is easy! just pass the div to it constructor:

 let mycombo=Combo.New(document.getElementById('myCombo')); mycombo.options(['first', 'second', 'third']); mycombo.onchange=function(e, combo) { let val=combo.value; // let val=this.value; // same as above alert(val); } 

 <script src="https://rawgit.com/kofifus/New/master/new.min.js"></script> <script src="https://rawgit.com/kofifus/Combo/master/combo.min.js"></script> <div id="myCombo" style="width:100px;height:20px;"></div> 

Answer 6

It is much smaller, does not require jquery and works better in safari. https://github.com/Fyrd/purejs-datalist-polyfill/

Mark problems to change to add downarrow. https://github.com/Fyrd/purejs-datalist-polyfill/issues

Answer 7

My solution is very simple, it looks like a native editable combobox and even works in IE6 (some answers here require a lot of code or external libraries, and the result is, for example, the text in the text box follows the drop-down icon of the combo box part or it does not look like an editable one combo box).

The goal is to copy the combobox so that only the drop-down icon appears above the text box. And the text box is a little under the combobox part, so you do not see its right end - it continues visually with combobox: https://jsfiddle.net/dLsx0c5y/2/

 select#programmoduleselect { clip: rect(auto auto auto 331px); width: 351px; height: 23px; z-index: 101; position: absolute; } input#programmodule { width: 328px; height: 17px; } <table><tr> <th>Programm / Modul:</th> <td> <select id="programmoduleselect" onchange="var textbox = document.getElementById('programmodule'); textbox.value = (this.selectedIndex == -1 ? '' : this.options[this.selectedIndex].value); textbox.select(); fireEvent2(textbox, 'change');" onclick="this.selectedIndex = -1;"> <option value=RFEM>RFEM</option> <option value=RSTAB>RSTAB</option> <option value=STAHL>STAHL</option> <option value=BETON>BETON</option> <option value=BGDK>BGDK</option> </select> <input name="programmodule" id="programmodule" value="" autocomplete="off" onkeypress="if (event.keyCode == 13) return false;" /> </td> </tr></table> 

(Used initially, for example, here, but do not submit the form: old.dlubal.com/WishedFeatures.aspx)

EDIT: the styles should be a little different for macOS: Ch ​​in order, since FF increases the height of the combobox, Safari and Opera ignore the height of the combobox, therefore increase their font size (has an upper limit, and then decrease the “bit height” text box): https://i.stack.imgur.com/efQ9i.png

Answer 8

Given that the HTML datalist tag is still not fully supported, the alternative approach I used is the Dojo Toolkit ComboBox . It was easier to implement and better documented than the other options I studied. It also blends well with existing structures. In my case, I added this combobox to an existing Codeigniter and Bootstrap based website without any problems. You just need to apply the Dojo theme (for example, class = "claro") to the combined parent instead of the body tag to avoid style conflicts.

First enable CSS for one of the Dojo themes (for example, "Claro"). It is important that the CSS file is included before the JS files below.

 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.9.6/dijit/themes/claro/claro.css" /> 

Next, enable jQuery and Dojo Toolkit via CDN

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script> 

You can then simply follow the Dojo sample code or use the sample below to get a working summary.

 <body> <!-- Dojo Dijit ComboBox with 'Claro' theme --> <div class="claro"><input id="item_name_1" class=""/></div> <script type="text/javascript"> $(document).ready(function () { //In this example, dataStore is simply an array of JSON-encoded id/name pairs dataStore = [{"id":"43","name":"Domain Name Renewal"},{"id":"42","name":"Hosting Renewal"}]; require( [ "dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"], function (Memory, ComboBox) { var stateStore = new Memory({ data: dataStore }); var combo = new ComboBox({ id: "item_name_1", name: "desc_1", store: stateStore, searchAttr: "name"}, "item_name_1" ).startup(); }); }); </script> </body> 

Answer 9

None of the other answers were satisfactory, mainly because the interface still looks bad. I found this one that looks good and is very close to perfect and customizable.

A complete list of examples and options and the like can be found here , but there is a basic demo here:

 $('#editable-select').editableSelect(); 

 <link href="https://cdn.jsdelivr.net/npm/jquery-editable-select@2.2.5/dist/jquery-editable-select.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery-editable-select@2.2.5/dist/jquery-editable-select.min.js"></script> <select id="editable-select"> <option>Alfa Romeo</option> <option>Audi</option> <option>BMW</option> <option>Citroen</option> </select> 

Answer 10

Check out ComboBox or Combo on this site: http://www.jeasyui.com/documentation/index.php#

Answer 11

  <html> <head> <title></title> <script src="jquery-3.1.0.js"></script> <script> $(function () { $('#selectnumber').change(function(){ alert('.val() = ' + $('#selectnumber').val() + ' AND html() = ' + $('#selectnumber option:selected').html() + ' AND .text() = ' + $('#selectnumber option:selected').text()); }) }); </script> </head> <body> <div> <select id="selectnumber"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> <option value="4">four</option> </select> </div> </body> </html> 

Thank...:)