Seeking assistance to enhance the highlighting feature after entering a letter in the search box. Here is the current code snippet:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="javascripts/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="javascripts/jquery-ui-1.11.0.custom/external/jquery/jquery.js"></script>
<script type="text/javascript" enter code heresrc="javascripts/jquery-ui-1.11.0.custom/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="javascripts/jquery-ui-1.11.0.custom/jquery- ui.css">
<script type="text/javascript" src="jquerysearch.js"></script>
<script type="text/javascript">
//Communication to PHP file and server
function searchq() {
var searchTxt = $("#searchbox").val();
$(function() {
$("#searchbox").autocomplete({
appendTo: function(request, response) {
$.post("tagasearch4.php", {
searchVal: searchTxt
}, function(output) {
$("#output").html(output);
var myFunction = function(i) {
$(this).attr('tabindex', i - 0)
};
$("li").each(myFunction)
$('li').addClass('selected');
$('input').addClass('menu');
});
}
});
});
$("#searchbox").keypress(function() {
$("#output").css("border-style", "inset");
});
};
//Adding custom effects to List
$("table").mouseover(function() {
$("table").css("paddingLeft", "60px");
});
$("li").mouseout(function() {
$("li").css("background-color", "white");
});
//Adding custom effects to SearchBox
$(function() {
$('#searchbox').click(function() {
$(this).effect('highlight')
});
});
</script>
<style type="text/css">
th {
border-color: skyblue;
}
th {
text-align: center;
}
th {
border-radius: 7%;
}
table {
padding-left: 60px;
}
nav ul li:hover {
background: blue;
}
nav ul li {
cursor: pointer;
}
</style>
</head>
<body>
<form method="post" action="" class="searchbox" autocomplete="off">
<label for="search">Member:</label>
<input name="searchbox" type="text" onkeydown="searchq()" placeholder="SEARCH" id="searchbox" size="40" maxlength="70"/>
<nav role="navigation">
<ul style="list-style-type: none" id="list" type="text">
<li id="output"></li>
</ul>
</nav>
</form>
</body>
</html>
The current behavior only highlights all fields in the autosuggestion box.