JSFiddle - React, Tailwind, and code Playground

HTML

<select id="test">        
<option>aaaaaaaaaaaaaaa</option>
<option>bbbbbbbbbbbbbbb</option>
<option>ccccccccccccccc</option>
<option>ddddddddddddddd</option>
<option>eeeeeeeeeeeeeee</option>
<option>fffffffffffffff</option>
<option>ggggggggggggggg</option>
</select>
<script>

(function($) {
    function autocomplete(select, options, id) {
        this.defaults = {
            'select': select,
            'id': 'autocomplete' + id,
            'width': options.width,
            'height': options.height,
            'defaultvalue': options.defaultvalue || options.defaultvalue1,
            'onSelect': options.onSelect,
            'onBlur': options.onBlur,
            'options': null,
            'liststr': null,
            'ref': {},
            'pointer': -1
        };
    }
    autocomplete.prototype = {
        'constructor': autocomplete,
        'trim': function(str) {
            return str.replace(/^\s+|\s+$/g, '');
        },
        'init': function() {
            var current = this;
            var settings = this.defaults;
            var opt = settings.select.getElementsByTagName('option');
            var olen = opt.length;
            var dynlist = '';
            for (var i = 0, j = olen; i < j; i++) {
                var optvalue = current.trim(opt[i].innerHTML);
                if (optvalue) {
                    dynlist += '<li>' + optvalue + '</li>';
                }
            }
            var str = '<div class="ac_container" id="' + settings.id + '">';
            str += '<input type="text" class="ac_search" autocomplete="off" value="' + settings.defaultvalue + '" />';
            str += '<span class="ac_clear"></span>';
            str += '<ul class="ac_results"></ul>';
            str += '</div>';
            $(settings.select).after(str);
            var $container = $('#' + settings.id);
            var $text = $container.find('.ac_search');
            var $clear = $container.find('.ac_clear');
            var $ul =...

CSS

.ac_container { height: 20px; position: relative; margin: 0; padding: 0; font-family: arial; font-size: 8pt; }
.ac_search { vertical-align: middle; margin: 0; display: inline-block; color: #000; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; height: 18px; line-height: 18px; border: 1px solid #3c7eb0; border-right: 0; padding: 0 0 0 3px; }
.ac_search_disable { vertical-align: middle; margin: 0; display: inline-block; height: 20px; background: yellow; border: 0; border-left: 1px solid #767676; }
.ac_clear { vertical-align: middle; margin: 0; padding: 0; display: inline-block; width: 18px; height: 20px; background: yellow; }
.ac_clear_disable { vertical-align: middle; margin: 0; padding: 0; display: inline-block; width: 18px; height: 20px; }
ul.ac_results { margin: 0; padding: 0; clear: both; height: auto; overflow-x: auto; overflow-y: scroll; border: 1px solid #3c7fb1; display: none; position: absolute; left: 0; background: #FFF; list-style: none; text-align: left !important; }
ul.ac_results li { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; display: block; padding: 0 5px; cursor: pointer; overflow-y: hidden; text-align: left !important; }
ul.ac_results li.current { background: #95b8d4; }
ul.ac_results li strong { color: blue; font-weight: bold; }
ul.ac_results li:hover { background: #95b8d4; }
.gray { color: gray; }
#test{display:none;}

JavaScript

$(function() {
    $('#test').ddsearch({
        'width': '250px',
        'height': '100px',
        'defaultvalue': '',
        'defaultvalue1': 'Select One',
        'onSelect': null,
        'onBlur': null
    });
});