combobox cooney

by mirontoli

HTML

<!--justin cooney:
http://jwcooney.com/2012/03/22/jquery-editable-select-list-how-to-duplicate-the-value-into-a-text-box-as-it-is-being-entered/
-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />

<div class="demo">
<div class="ui-widget">&nbsp;
<select name="selSelectListName" id="selSelectListId">
    <option value="Alfa">Alfa</option>
    <option value="Bravo">Bravo</option>
    <option value="Charlie">Charlie</option>
    <option value="Delta">Delta</option>
    <option value="Echo">Echo</option>
    <option value="Foxtrot">Foxtrot</option>
    <option value="Golf">Golf</option>
    <option value="Hotel">Hotel</option>
    <option value="India">India</option>
    <option value="Juliett">Juliett</option>
    <option value="Juliet">Juliet</option>
    <option value="Kilo">Kilo</option>
    <option value="Lima">Lima</option>
    <option value="Mike">Mike</option>
    <option value="November">November</option>
    <option value="Oscar">Oscar</option>
    <option value="Papa"">Papa</option>
</select>
Duplication area:
    <input type="text" id="editTestId" name="editTestName" value="cat">
    <input type="submit" id=connectbutton value="Submit Form" name="ButtonLogin" class="button">
</div>
</div>

CSS

.ui-menu-item {font-size:8pt;}
.demo{font-size:8pt;}
.ui-button { margin-left: -1px; padding-top: 2px;padding-bottom: 2px;}
.ui-button-icon-only .ui-button-text { padding: 0.35em; }
.ui-autocomplete-input { margin: 0; padding: 0.2em 0 0.47em 0.45em;height:20px;}
.ui-button.ui-widget .ui-button-text{ line-height:10px; font-size:2pt; }

JavaScript

(function($) {
    $.widget("ui.combobox", {
        _create: function() {
            var self = this,
                select = this.element.hide(),
                selected = select.children(":selected"),
                value = selected.val() ? selected.text() : "";
            var input = this.input = $("<input>").insertAfter(select).val(value).autocomplete({
                delay: 0,
                minLength: 0,
                source: function(request, response) {
                    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                    response(select.children("option").map(function() {
                        var text = $(this).text();
                        if (this.value && (!request.term || matcher.test(text))) return {
                            label: text.replace(
                            new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
                            value: text,
                            option: this
                        };
                    }));
                },
                search: function(event, ui) {
                    var setValue = $(this).val();
                    $("#editTestId").val(setValue);
                },
                select: function(event, ui) {
                    ui.item.option.selected = true;
                    self._trigger("selected", event, {
                        item: ui.item.option
                    });
                    $("#editTestId").val(ui.item.value);
                },
                change: function(event, ui) {
                    var setValue = $(this).val();
                    $("#editTestId").val(setValue);
                    if (!ui.item) {
                        var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
                            valid = false;
                       ...