代码如下：

 <html>
 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta content="text/html; charset=utf-8" http-equiv="content-type" />
     <title>bing search</title>
     <style type="text/css">
     body{background-color: #333;}
     .bg-div{position:relative;background-image: url(river.jpg);width:1228px;height:690px;margin: 0 auto;}
     .logo{background-image: url(logo.png);height:53px;width: 107px; float: left;margin: -4px 18px 0 0;}
     .search-form{float: left; background-color: #fff;padding:5px;}
     .search-text{height:25px;line-height: 25px;float: left;width: 350px;border: 0;outline: none;}
     .search-button{background-image: url(search-button.png);width:29px;height:29px;float: left;border: 0}
     .search-box{position:absolute;top:150px;left: 200px; }
     .suggest{width:388px; background-color:#fff;position:absolute;margin:0;padding:0;border-width:1px;border-style:solid;border-color: #999;}
     .suggest ul{list-style:none;display:block;margin:0;padding:0}
     .suggest ul li {padding:3px;line-height:25px;font-size: 14px;color: #777;cursor: pointer;padding:3px;}
     .suggest ul li:hover{background-color:#e5e5e5;text-decoration: underline;}
     .suggest strong{color:#000;}
     .clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0px;}
     .clearfix{zoom:1}

     .nav{margin:0 auto; width:1228px;}
     .nav ul{list-style:none;margin:0;padding:0;}
     .nav ul li{float:left;padding:10px;}
     .nav ul li a{color:#999; text-decoration:none;font-size:12px; font-weight:bold;}
     a:hover {text-decoration: underline;}
     </style>
 </head>

 <body>
 <div class="nav">
 <ul class="clearfix">
     <li><a href="#">图片</a></li>
     <li><a href="#">视频</a></li>
     <li><a href="#">词典</a></li>
     <li><a href="#">咨询</a></li>
     <li><a href="#">地图</a></li>
     <li><a href="#">影响力</a></li>
     <li><a href="#">更多</a></li>
 </ul>
 </div>
  <div class="bg-div">
      <div class="search-box">
      <div class="logo"></div>

          <form class="search-form" action="https://cn.bing.com/search" target="_blank" id="search-form">
              <input type="text" class="search-text" name="q" id="search_input" autocomplete="off"/>
              <input type="submit" class="search-button" value=""/>
          </form>

      </div>
  </div>
  <div class="suggest" id="search-suggest" style="display:none">
                 <ul id="search-result">
                     <li> 搜索内容 </li>
                     <li> 搜索内容 </li>
                 </ul>
 </div>
  <script src="js/jquery-1.10.2.min.js"></script>
  <script>
  $('#search_input').bind('keyup',function(){
     var jqueryInput = $(this);
     var searchText = jqueryInput.val();
     $.get('http://api.bing.com/qsonhs.aspx?q='+searchText);
  });
 $('#search-suggest').css({
     top:$('#search-form').offset().top+$('#search-form').height()+10,
     left:$('#search-form').offset().left
 }).show();

  </script>
 </body>
 </html>

效果图如下：

搜索功能demo的更多相关文章

  1. Android搜索功能的案例，本地保存搜索历史记录......

    开发的APP有一个搜索功能,并且需要显示搜索的历史记录,我闲暇之余帮她开发了这个功能,现把该页面抽取成一个demo分享给大家. 实现效果如图所示:  本案例实现起来很简单,所以可以直接拿来嵌入项目中使 ...

  2. iOS--- UITableView + UISearchDisplayController - - - - -实现搜索功能

    iOS中UISearchDisplayController用于搜索,搜索栏的重要性我们就不说了,狼厂就是靠搜索起家的,现在越来越像一匹没有节操的狼,UC浏览器搜索栏现在默认自家的神马搜索,现在不管是社 ...

  3. [Android分享] 【转帖】Android ListView的A-Z字母排序和过滤搜索功能

      感谢eoe社区的分享   最近看关于Android实现ListView的功能问题,一直都是小伙伴们关心探讨的Android开发问题之一,今天看到有关ListView实现A-Z字母排序和过滤搜索功能 ...

  4. CSS选择器实现搜索功能 驱动过滤搜索技术

    一.CSS选择器可以用来实现搜索功能 CSS选择器可以用来实现搜索功能. 作者以前提过CSS3的选择器结合表单元素可以用来控制元素的显隐,这里,类似的,还是CSS3的选择器,用来过滤和搜索页面元素. ...

  5. Android ListView用EditText实现搜索功能

    前言 最近在开发一个IM项目的时候有一个需求就是,好友搜索功能.即在EditText中输入好友名字,ListView列表中动态展示刷选的好友列表.我把这个功能抽取出来了,先贴一下效果图: 分析 在查阅 ...

  6. Android 实现ListView的A-Z字母排序和过滤搜索功能，实现汉字转成拼音

    转载:http://blog.csdn.net/xiaanming/article/details/12684155 转载请注明出处:http://blog.csdn.net/xiaanming/ar ...

  7. 基于前端javascript的搜索功能

    发表于 2013/11/07 当在数据量不是很大,而且没有后端对应的功能接口的时候,一些简单的搜索功能基本上是前端去实现的,正好最近用到,写了一个,贴出来和大家分享: 功能描述: 按下键盘后及时搜索条 ...

  8. 百度地图API的自动定位和搜索功能（移动端）

    近期有个项目涉及到百度地图API,要求做到自动定位和搜索功能.煞费苦心的研究半天,终于能将两个功能合二为一,现将代码贴出来分享给大家,希望你们的砖搬得又快又好.注释不多,具体请参照:http://lb ...

  9. Lucene5.5.4入门以及基于Lucene实现博客搜索功能

    前言 一直以来个人博客的搜索功能很蹩脚,只是自己简单用数据库的like %keyword%来实现的,所以导致经常搜不到想要找的内容,而且高亮显示.摘要截取等也不好实现,所以决定采用Lucene改写博客 ...

随机推荐

  1. XML约束——DTD约束

    参考: 方立勋老师的讲课视频.   什么是XML约束 •在XML技术里,可以编写一个文档来约束一个XML文档的书写规范,这称之为XML约束. 为什么需要XML约束 常用的约束技术 •XML DTD • ...

  2. [转载] 彻底学习STL中的Allocator

    原文: http://cissco.iteye.com/blog/379093 帮助我们理解allocator的原理 Allocator是C++语言标准库中最神秘的部分之一.它们很少被显式使用,标准也 ...

  3. SQL & PL/SQL 模块总结

    SQL 1. 各种function 2. merge 3. connect by PL/SQL 1. pl/sql 寄出 2. 游标 3. procedure 4. function 5. packa ...

  4. 事件冒泡与事件委托 -Tom

    事件冒泡 事件冒泡,就是事件触发的时候通过DOM向上冒泡,首先要知道不是所有的事件都有冒泡.事件在一个目标元素上触发的时候,该事件将触发祖先节点元素,直到最顶层的元素: 如图所示,如果a连接被点击,触 ...

  5. js call与apply的区别-Tom

    .apply和.call方法是在函数原型中定义的两个方法(因此所有的函数都可以访问它)允许去手动设置函数调用的this值,他们用接受 的第一个参数作为this值,this 在调用的作用域中使用.这两个 ...

  6. Python循环嵌套

    可以在循环体内嵌入其他的循环体,如在while循环中可以嵌入for循环, 反之,你可以在for循环中嵌入while循环. 实例: 以下实例使用了嵌套循环输出3~13之间的素数: 以上实例输出结果: F ...

  7. Mysql中的排序规则utf8_unicode_ci、utf8_general_ci的区别总结

    Mysql中utf8_general_ci与utf8_unicode_ci有什么区别呢?在编程语言中,通常用unicode对中文字符做处理,防止出现乱码,那么在MySQL里,为什么大家都使用utf8_ ...

  8. HTML5结合百度地图API创建地图应用

    具体的百度地图API的使用方法查看百度地图API里的DEMO <style> #div1{ width:400px; height:400px; border:1px #000 solid ...

  9. Htmlt_Div+Css简介

    DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV ...

  10. hiho_99_骑士问题

    题目大意 给定国际象棋8x8棋盘上三个起始点,三个骑士分别从三个起始点开始移动(骑士只能走日字,且骑士从任意一点出发可以走遍整个棋盘).现要求三个骑士汇聚到棋盘上某个点,且使得骑士到达该点所移动的次数 ...