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

来源：互联网发布：怀卡托理工学院知乎编辑：程序博客网时间：2024/05/29 14:29

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>

0 0