jquery autocomplete ui matched text color

jquery autocomplete ui matched text color

Hi,

I am using the following for jquery autocomplete search code. Can anyone help in highlighting the matched text with a different color as someone types the letters?

  1. <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
                        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
                        <script>
                        $(function() {
                            $( "#search-box" ).autocomplete({
                                source: 'livesearch.php'
                            });
                        });
                        </script>
                        <style type="text/css">
                        .ui-autocomplete {
                            position: absolute;
                            top: 100%;
                            left: 0;
                            z-index: 1000;
                            float: left;
                            display: none;
                            min-width: 672px !important;  
                            padding: 0px 10px;
                            margin: 0 0 10px 25px;
                            list-style: none;
                            background-color: #f5f8f9;       
                            font-family: 'Ubuntu', sans-serif;
                            text-transform:initial !important;   
                            font-size:14px;       
                        }   
                        .ui-menu-item {
                            border-bottom:1px solid #b4c4d4 !important;
                            padding-bottom:10px !important;
                            padding-top:10px !important;
                        }
                        .ui-menu-item > a.ui-corner-all {
                            display: block;
                            clear: both;
                            font-weight: normal;
                            line-height: 25px;
                            color: #0a0a0a;
                            white-space: nowrap;
                            text-decoration: none;
                            text-transform:lowercase !important;
                        }
                        .ui-menu-item > a.ui-corner-all:first-letter {
                            text-transform:uppercase;   
                        }
                       
                        .ui-state-hover, .ui-state-active {
                            color: #ffffff;
                            text-decoration: none;
                            background-color: #0088cc;
                            padding-left:0px !important;
                            padding-right:0px !important;
                            border-radius: 0px;
                            -webkit-border-radius: 0px;
                            -moz-border-radius: 0px;
                            background-image: none;
                        }
                        .ui-state-highlight a {
                            font-weight: bold;
                            color:#002e5b !important;
                        }
                        .ui-state-highlight {
                            font-weight: bold;
                            color:#002e5b !important;
                        }
                        </style>
                        <form method="post" action="#">
       
                            <input name="country" id="search-box" autocomplete="off" spellcheck="false" class="auto">
                           

                     </form>
Regards,
Naveen