这几天我一直在为 Jquery 的自动完成而苦苦思索。我现在可以使用以下命令从页面 (/jsontest) 中正确显示字典的 JSON 列表:
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src=/static/js/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="static/css/jquery-ui-1.10.3.custom.css">
<link rel="stylesheet" type="text/css" href="/static/css/autocomplete2.css">
<script>
$(function() {
$( "#tags" ).autocomplete({
source: '/jsontest',
minchar: 2,
delay: 500,
select: function (event, ui) {
window.location = ui.item.url;}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Search: </label>
<input id="tags" />
</div>
</body>
</html>
我的 autocomplete.css 文件如下所示:
#tags {
border-radius: 0px;
background: white;
color: #96f226;
border: 1px solid #454545;
height: 0 0 30px;
}
#tags:hover {
background: white; /*#656565*/
}
#tags:active {
box-shadow: 0 0 60px #96f226
}
#tags:focus {
box-shadow: 0 0 30px #96f226
}
.ui-tooltip {
background: #4a4a4a;
color: #96f226;
border: 2px solid #454545;
border-radius: 0px;
box-shadow: 0 0
}
.ui-autocomplete {
background: #4a4a4a;
border-radius: 0px;
}
.ui-autocomplete.source:hover {
background: #454545;
}
.ui-menu .ui-menu-item a{
color: red; /*#96f226;*/
border-radius: 0px;
border: 1px solid #454545;
}
我从 this jsfiddle example 得到了很多这样的东西，但是虽然箭头键可以正常工作并且突出显示可以正常工作，但在我的页面上两者都没有。谁能帮忙？
非常感谢， 亚历克斯
最佳答案
感谢 user2187738，我能够将它缩小到我正在使用的 jquery 文件。不知道是我把它搞砸了还是怎么的，但是当我改变它时它起作用了:
<script type="text/javascript" src=/static/js/jquery-latest.js"></script>
为此:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
关于javascript - Jquery 自动完成 - 悬停时不突出显示元素并且箭头不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20024027/