一个下拉菜单/文本字段

Option 1

Include the script from dhtmlgoodies and initialize like this:

<input type="text" name="myText" value="Norway"
selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico">

createEditableSelect(document.forms[0].myText);

Option 2

Here's a custom solution which combines a <select> element and <input> element, styles them, and toggles back and forth via JavaScript

<div style="position:relative;width:200px;height:25px;border:0;padding:0;margin:0;">
<select style="position:absolute;top:0px;left:0px;width:200px; height:25px;line-height:20px;margin:0;padding:0;"
onchange="document.getElementById('displayValue').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">
<option></option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<input type="text" name="displayValue" id="displayValue"
placeholder="add/select a value" onfocus="this.select()"
style="position:absolute;top:0px;left:0px;width:183px;width:180px\9;#width:180px;height:23px; height:21px\9;#height:18px;border:1px solid #556;"  >
<input name="idValue" id="idValue" type="hidden">
</div>

You can do this natively with HTML5 <datalist>:

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
<option value="Microsoft Edge">
</datalist>

I like jQuery Token input. Actually prefer the UI over some of the other options mentioned above.

http://loopj.com/jquery-tokeninput/

Also see: http://railscasts.com/episodes/258-token-fields for an explanation

I found this question and discussion very helpful and wanted to show the solution I ended up with. It is based on the answer given by @DevangRathod, but I used jQuery and made a couple tweaks to it, so wanted to show a fully commented sample to help anyone else working on something similar. I originally had been using the HTML5 data-list element, but was dissatisfied with that solution since it removes options from the drop down list that don't match text typed in the box. In my application, I wanted the full list to always be available.

Fully functional demo here: https://jsfiddle.net/abru77mm/

HTML:

<!--
Most style elements I left to the CSS file, but some are here.
Reason being that I am actually calculating my width dynamically
in my application so when I dynamically formulate this HTML, I
want the width and all the factors (such as padding and border
width and margin) that go into determining the proper widths to
be controlled by one piece of code, so those pieces are done in
the in-line style.  Otherwise I leave the styling to the CSS file.
-->
<div class="data-list-input" style="width:190px;">
<select class="data-list-input" style="width:190px;">
<option value="">&lt;Free Form Text&gt;</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<!-- Note that though the select/option allows for a different
display and internal value, there is no such distinction in the
text box, so for all the options (except the "none" option) the
value and content of the option should be identical. -->
</select>
<input class="data-list-input" style="width:160px;padding:4px 6px;border-width:1px;margin:0;" type="text" name="sex" required="required" value="">
</div>

JS:

jQuery(function() {
//keep the focus on the input box so that the highlighting
//I'm using doesn't give away the hidden select box to the user
$('select.data-list-input').focus(function() {
$(this).siblings('input.data-list-input').focus();
});
//when selecting from the select box, put the value in the input box
$('select.data-list-input').change(function() {
$(this).siblings('input.data-list-input').val($(this).val());
});
//When editing the input box, reset the select box setting to "free
//form input". This is important to do so that you can reselect the
//option you had selected if you want to.
$('input.data-list-input').change(function() {
$(this).siblings('select.data-list-input').val('');
});
});

CSS:

div.data-list-input
{
position: relative;
height: 20px;
display: inline-flex;
padding: 5px 0 5px 0;
}
select.data-list-input
{
position: absolute;
top: 5px;
left: 0px;
height: 20px;
}
input.data-list-input
{
position: absolute;
top: 0px;
left: 0px;
height: 20px;
}

Any comments for improvement on my implementation welcome. Hope someone finds this helpful.

Inspired by the js fiddle by @ajdeguzman (made my day), here is my node/React derivative:

 <div style=\{\{position:"relative",width:"200px",height:"25px",border:0,
padding:0,margin:0}}>
<select style=\{\{position:"absolute",top:"0px",left:"0px",
width:"200px",height:"25px",lineHeight:"20px",
margin:0,padding:0}} onChange={this.onMenuSelect}>
<option></option>
<option value="starttime">Filter by Start Time</option>
<option value="user"     >Filter by User</option>
<option value="buildid"  >Filter by Build Id</option>
<option value="invoker"  >Filter by Invoker</option>
</select>
<input name="displayValue" id="displayValue"
style=\{\{position:"absolute",top:"2px",left:"3px",width:"180px",
height:"21px",border:"1px solid #A9A9A9"}}
onfocus={this.select} type="text" onChange={this.onIdFilterChange}
onMouseDown={this.onMouseDown} onMouseUp={this.onMouseUp}
placeholder="Filter by Build ID"/>
</div>

Looks like this:

I'd like to add a jQuery autocomplete based solution that does the job.

Step 1: Make the list fixed height and scrollable

Get the code from https://jqueryui.com/autocomplete/ "Scrollable" example, setting max height to the list of results so it behaves as a select box.

Step 2: Open the list on focus:

Display jquery ui auto-complete list on focus event

Step 3: Set minimum chars to 0 so it opens no matter how many chars are in the input

Final result:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Scrollable results</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
//      source: availableTags, // uncomment this and comment the following to have normal autocomplete behavior
source: function (request, response) {
response( availableTags);
},
minLength: 0
}).focus(function(){
//        $(this).data("uiAutocomplete").search($(this).val()); // uncomment this and comment the following to have autocomplete behavior when opening
$(this).data("uiAutocomplete").search('');
});
} );
</script>
</head>
<body>


<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>




</body>
</html>

Check jsfiddle here:

https://jsfiddle.net/bao7fhm3/1/

The modern solution is an input field of type "search"!

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search https://www.w3schools.com/tags/tag_datalist.asp

Somewhere in your HTML you define a datalist for later reference:

<datalist id="mylist">
<option value="Option 1">
<option value="Option 2">
<option value="Option 3">
</datalist>

Then you can define your search input like this:

<input type="search" list="mylist">

Voilà. Very nice and easy.

You can use the <datalist> tag instead of the <select> tag.

<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

You can use TextField as dropdown select ... try this code

var data = ['apple','orange','banana','pineapple']


<TextField
select
size="small"
fullWidth
SelectProps=\{\{ MenuProps: { sx: { maxHeight: 247 } } }}
>
{data.map((text) => (
<MenuItem value={text}>{text}</MenuItem>
))}
</TextField>