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

最新推荐文章于 2023-02-01 11:54:11 发布

老朱-yubing

最新推荐文章于 2023-02-01 11:54:11 发布

阅读量7.4k

点赞数

本文链接：https://blog.csdn.net/robinhunan/article/details/53954513

版权

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>

老朱-yubing

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
jquery的autocomplete 自动完成使用自己的css

jquery autocomplete的自动完成插件，功能比较全，也比较好用。但是大部分时候，还是想使用自己的样式，以保持风格一致。下面的代码展示了，使用自己的css，展示自动完成效果。
复制链接

扫一扫