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?
- <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