zoukankan      html  css  js  c++  java
  • 仿百度搜索提示

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>jQuery UI 自动完成示例</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
    $(function() {
    var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL高",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Per高l",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Sche高"
    ];

    $( "#tags1" ).autocomplete({
    source: availableTags
    });

    $("#tags2").autocomplete({
    source: ["a", "b", "c"]
    });

    //页面加载
    $("#tags3").autocomplete({
    source: DataSouce1()
    });

    //<a href='http://www.21edu8.com/pcnet/database/' target='_blank'><u>数据库</u></a>
    $("#tags4").autocomplete({
    source: function( request, response ) {
    var name=$.ui.autocomplete.escapeRegex( request.term );
    response( $.grep( DataSouce2(name), function( item ){
    return item;
    }) );
    }
    });

    //利用ajax页面加载就获取到数据源
    function DataSouce1()
    {
    var mycars=new Array()
    for (var i = 0; i <100; i++) {
    mycars[i]="高"+i;
    };
    return mycars;
    }

    //利用ajax根据输入的到<a href='http://www.21edu8.com/pcnet/database/' target='_blank'><u>数据库</u></a>查找 相当于
    function DataSouce2(name)
    {
    var mycars=new Array()
    for (var i = 0; i <100; i++) {
    mycars[i]=name+"_"+i;
    };
    return mycars;
    }

    });
    </script>
    </head>
    <body>
    <div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags1" />
    <input id="tags2" />
    <input id="tags3" />
    <input id="tags4" />
    </div>
    </body>
    </html>

    出处http://pc.21edu8.com/html/wangyetexiao/qitatexiao/20130610/16837.html

  • 相关阅读:
    sql server 常用函数 及 方法
    jQuery校验 表单验证
    解决VS2012新建MVC4等项目时,收到加载程序集“NuGet.VisualStudio.Interop…”的错误
    CC++宏大全
    Linux在线文档
    x264编码详细文字全过程
    国外程序员推荐的免费编程书籍资源
    使用eclipse快捷键
    aria2下载工具
    Ubuntu 12.04 后的VMWare Share Fold
  • 原文地址:https://www.cnblogs.com/liziqiang/p/3584710.html
Copyright © 2011-2022 走看看