您的位置：首页 > Web前端 > JQuery

jquery的autocomplete 自动完成使用自己的css

2016-12-31 11:49 543 查看

jquery autocomplete的自动完成插件，功能比较全，也比较好用。但是大部分时候，还是想使用自己的样式，以保持风格一致。

下面的代码展示了，使用自己的css，展示自动完成效果。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="http://libs.baidu.com/jqueryui/1.8.24/jquery-ui.min.js"></script>
<style>
.ui-helper-hidden-accessible {display:none;}
.ui-autocomplete { position: absolute; cursor: default; border-radius: 3px; border: 1px solid #c0c0c0; }  
.ui-menu {list-style: none;padding: 0;margin: 0;display: block;outline: none;}
.ui-menu .ui-menu-item a {text-decoration:none;display:block;padding:.2em .4em;line-height:1.5;zoom:1;}

 .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {background: #ff8a00;border: none;color:#000;border-radius:0;font-weight: normal;}
</style>

<script type="text/javascript">
$(document).ready(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#autocomplete").autocomplete({
source: availableTags,
minLength: 1
});
});
</script>

</head>
<body>
<form id="form1">
<div>
<input id="autocomplete"  />
</div>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航