希望有人能对我有所帮助,在搜索框中输入字母后,我想突出显示这些建议,代码如下:
<!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>
它们现在起作用的方式是,它仅突出显示自动提示框中的所有字段。
最佳答案
如果您可以给出JSFiddle,那会更好。
我想“搜索框”是输入字段,每当用户在“搜索框”中更改输入时,是否要突出显示“输出”?
如果是这样,那么这是我的建议:
JS:
$("#searchbox").keypress(function() {
$("#output").css("border-style", "inset");
});
改成:
$("#searchbox").change(function() {
$("#output").addClass("highlight");
});
CSS:添加此部分
.highlight{
border: red;
background-color: yellow;
}
关于jquery - 搜索框突出显示字段,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27280609/