Add combo-box drop-down functionality to existing text boxes, with a drop-down list populated either from a pre-cached array of values or dynamically via Ajax.
Type ap into the input box...
<head>
<script type="text/javascript" charset="utf-8">
function create_dropdown() {
var a = new Array();
a.push('accident');
a.push('aphid');
a.push('apple');
a.push('application');
a.push('appelation');
var s = document.getElementById('s');
var d = new DropDownSelector(s);
d.delay = 200;
d.maxEntries = 10;
d.setDataSourceArray(a);
}
</script>
</head>
<body onload="create_dropdown()">
<p>
<input type="text" id="s" />
</p>
</body>
Constructor.
Sets the data-source for the drop-down to an array of strings.
The delay in milliseconds after the user types in the textbox, before the drop-down appears
The maximum number of entries to display in the drop-down
The dropdown element id
Class for all entries in the dropdown
Class for the selected entry in the dropdown
#dropdown {
border: 1px solid #999;
background-color: #fff;
font-family: Helvetica, Arial, sans-serif;
min-width: 160px;
}
.dropdown_entry {
font-size: 12px;
padding: 2px;
}
.dropdown_entry_highlighted {
background-color: #36f;
color: #fff;
}