高亮显示字段的搜索框
高亮显示字段的搜索框
提问于 2014-12-04 04:04:06
我希望有人能帮助我，我在搜索框中输入一个字母后，正在尝试突出显示建议，以下是代码：
<!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>他们现在的工作方式是，它只突出显示自动提示框中的所有字段。
回答 1
Stack Overflow用户
发布于 2014-12-04 10:58:21
如果你能给出一个JSFiddle就更好了。
我猜"searchbox“是输入字段，每当用户更改"searchbox”中的输入时，您想突出显示"output“吗？
如果是这样，那么这是我的建议：
JS：
$("#searchbox").keypress(function() {
$("#output").css("border-style", "inset");
});更改为：
$("#searchbox").change(function() {
$("#output").addClass("highlight");
});CSS:添加此部件
.highlight{
border: red;
background-color: yellow;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27280609
复制相关文章
相似问题
腾讯云开发者
