jquery的autocomplete 自動完成使用自己的css
阿新 • • 發佈：2019-02-01
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>