JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="input" placeholder="Select a State" />

CSS

.auto_dropdown_box {
    position: absolute;
    display: block;
    height: 180px;
    background: #FFF;
    border: 1px solid rgba(82, 168, 236, 0.8);
    font-weight: normal;
    -webkit-box-shadow: 0px 1px 10px 1px rgba(50, 50, 50, 0.1);
       -moz-box-shadow: 0px 1px 10px 1px rgba(50, 50, 50, 0.1);
        -ms-box-shadow: 0px 1px 10px 1px rgba(50, 50, 50, 0.1);
         -o-box-shadow: 0px 1px 10px 1px rgba(50, 50, 50, 0.1);
            box-shadow: 0px 1px 10px 1px rgba(50, 50, 50, 0.1);
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
        -ms-border-radius: 2px;
         -o-border-radius: 2px;
            border-radius: 2px;
}
.auto_dropdown_box ul {
    position: relative;
    height: 180px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    overflow-y: scroll;
    overflow-x: hidden;
}
.auto_dropdown_box ul li:after { content: ""; clear: both; }
/*.auto_dropdown_box ul::-webkit-scrollbar {
    overflow: hidden;
    width: 6px;
    background: #fafafa;
}
.auto_dropdown_box ul::-webkit-scrollbar:horizontal { height: 1px; }
.auto_dropdown_box ul::-webkit-scrollbar-button { display: none; }
.auto_dropdown_box ul::-webkit-scrollbar-piece { background: #eee; }
.auto_dropdown_box ul::-webkit-scrollbar-piece:start { background: #eee; }
.auto_dropdown_box ul::-webkit-scrollbar-thumb {
    background: #e0e0e0;
    -webkit-border-radius: 1px;
       -moz-border-radius: 1px;
        -ms-border-radius: 1px;
         -o-border-radius: 1px;
            border-radius: 1px;
}
.auto_dropdown_box ul::-webkit-scrollbar-corner { background: #333; } */
.auto_dropdown_box .auto_dropdown_box_item {
    position: relative;
    width: 100%;
    height: 30px;
    overflow: hidden;
    color: #101010;
    cursor: pointer;
    list-style-type: none;
    background-color: #FFFFFF;
    padding-left: 10%;
}
.auto_dropdown_box .auto_dropdown_box_item .auto_dropdown_box_item_label {
    display: table-cell;
    height: 30px;
    width: 100%;
    vertical-align: middle;
   ...

JavaScript

/**
 * This has just been to learn some basics of creating a jQuery plugin.
 * I'm sure there are plenty of things that can be improved, that could
 * be added, that are completely irrelevant, etc. In NO WAY is this perfect,
 * in fact it is probably far from it.
 * 
 * To give credit where it's due, I used this plugin as a starting point:
 * https://github.com/mugifly/jquery-hover-dropdown-box/blob/master/jquery-hover-dropdown-box.js
 * For the text highlighting:
 * http://dinowebs.net/index.php/highlighting-matching-text-in-search-results-with-jquery/
 * 
 * Only BASIC testing has been done. It seems to work as expected 
 * in both IE8 and Chrome version 30 (still possible I missed something)
 * 
 * If issues are found, please fork this fiddle and add a comment on 
 * or update my Stack Overflow post with a link and explanation of the 
 * fix. Here is a link to my post:
 * http://stackoverflow.com/q/21708138/738262
 */

(function($) {
    var states = [
		{ "name": "Alabama", "abbreviation": "AL" },
        { "name": "Alaska", "abbreviation": "AK" },
		{ "name": "Arizona", "abbreviation": "AZ" },
        { "name": "Arkansas", "abbreviation": "AR" },
		{ "name": "California", "abbreviation": "CA" },
        { "name": "Colorado", "abbreviation": "CO" },
		{ "name": "Connecticut", "abbreviation": "CT" },
        { "name": "Delaware", "abbreviation": "DE" },
		{ "name": "Florida", "abbreviation": "FL" },
        { "name": "Georgia", "abbreviation": "GA" },
		{ "name": "Hawaii", "abbreviation": "HI" },
        { "name": "Idaho", "abbreviation": "ID" },
		{ "name": "Illinois", "abbreviation": "IL" },
        { "name": "Indiana", "abbreviation": "IN" },
		{ "name": "Iowa", "abbreviation": "IA" },
        { "name": "Kansas", "abbreviation": "KS" },
		{ "name": "Kentucky", "abbreviation": "KY" },
        { "name": "Louisiana", "abbreviation": "LA" },
		{ "name": "Maine", "abbreviation": "ME" },
        { "name": "Maryland", "abbreviation": "MD" },
		{ "name":...