| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
| <html xmlns="http://www./1999/xhtml">
|
| <head>
|
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
| <title>Jquery实现仿搜索引擎文本框自动补全插件 - Jquery-school</title>
|
|
|
| <link rel="stylesheet" href="css/jquery.bigautocomplete.css" type="text/css" />
|
|
|
| <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
|
| <script type="text/javascript" src="js/jquery.bigautocomplete.js"></script>
|
| <script type="text/javascript">
|
| $(function(){
|
|
|
| $("#tt").bigAutocomplete({
|
| width:543,
|
| data:[{title:"中国好声音",result:{ff:"qq"}},
|
| {title:"中国移动网上营业厅"},
|
| {title:"中国银行"},
|
| {title:"中国移动"},
|
| {title:"中国好声音第三期"},
|
| {title:"中国好声音 第一期"},
|
| {title:"中国电信网上营业厅"},
|
| {title:"中国工商银行"},
|
| {title:"中国好声音第二期"},
|
| {title:"中国地图"}],
|
| callback:function(data){
|
| alert(data.title);
|
| }
|
| });
|
|
|
| })
|
| </script>
|
|
|
| </head>
|
| <body>
|
|
|
| <style type="text/css">
|
| *{margin:0;padding:0;list-style-type:none;}
|
| a,img{border:0;}
|
| .demo{width:720px;margin:30px auto;}
|
| .demo h2{font-size:16px;color:#3366cc;height:30px;}
|
| .demo li{float:left;}
|
| .text,.button{background:url(http://su./static/superpage/img/spis_031ddf34.png) no-repeat;}
|
| .text{width:529px;height:22px;padding:4px 7px;padding:6px 7px 2px\9;font:16px arial;border:1px solid #cdcdcd;border-color:#9a9a9a #cdcdcd #cdcdcd #9a9a9a;vertical-align:top;outline:none;margin:0 5px 0 0;}
|
| .button{width:95px;height:32px;padding:0;padding-top:2px\9;border:0;background-position:0 -35px;background-color:#ddd;cursor:pointer}
|
| </style>
|
|
|
| <div class="demo">
|
| <h2>请输入 “中国” 测试</h2>
|
| <form action="http://www./e/search/index.php" method="post" name="searchform" id="searchform" class="searchinfo">
|
| <ul>
|
| <li><input type="text" id="tt" value="" class="text" /></li>
|
| <li><input type="submit" value="搜索" class="button" /></li>
|
| </ul>
|
| </form>
|
| </div>
|
|
|
| </body>
|
| </html>
|
| |
