分类目录

链接

友情链接

统计信息

  • 日志总数:116篇
  • 评论总数:185条
  • 分类总数:11个
  • 标签总数:391个
  • 友情链接:0个
  • 网站运行:3288天

2019年十二月
« 10月    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  
>
现在位置:    首页 > html5/css3, javascript > 正文

jqueryui 分享一个有用的widget autocomplete

html5/css3, javascript 暂无评论

大家有没有看到 百度搜索你  输入词时 他会有个下拉给你选择 你想搜索的东西。比如:

QQ截图20171001011222.jpg

今天要分享的就是这个  只要一个简单的input  和一简单简单的 jquery 代码  就完成 了这样的功能了。。

如图所示:

QQ截图20171001010627.jpg

代码 如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Example Page</title>
<link href="css/base/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.js"></script>
<script>
$(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
    });

});
</script>
<style>
body{
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}

</style>
</head>
<body>


<h2>Autocomplete</h2>
<div>
    <input id="autocomplete">
</div>


</body>
</html>

以上就是所有的 内容

本文版权归企业网站建设,做网站,网站建设,php网站建设,dedecms建站,ecshop二次开发,html空间,网站修改所有,转载引用请完整注明以下信息:
本文作者:admin
本文地址:jqueryui 分享一个有用的widget autocomplete | 企业网站建设,做网站,网站建设,php网站建设,dedecms建站,ecshop二次开发,html空间,网站修改

抱歉!评论已关闭.