代码如下：

 <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. E2 2014.07.01 更新日志

    增加功能   完善功能 电话报修单,添加可以发短信通知客户和技术员选项 商品历程分析,增加按商品分类条件统计 修件库,增加可以按维修商条件过滤,以方便查询某维修商的返修件 维修中,备件转销售时,自动读 ...

  2. offsetLeft与style.left区别

    在javascript中经常遇到style.left和offsetLeft,那么它们有什么区别呢?今天我们来分析下 offsetLeft:获取当前元素相对于父元素的左侧偏移量,比如该元素设置为rela ...

  3. iOS - Swift Swift 语言新特性

    1.Swift 2.0 带来哪些新变化 常规变化: 1.OS X 10.11.iOS 9 和 watchOS 2 SDK 采纳了一些 Objective-C 的特性用来提高 Swift 的编程体验, ...

  4. spring常用的工具类

    spring给我们提供了很多的工具类, 应该在我们的日常工作中很好的利用起来. 它可以大大的减轻我们的平时编写代码的长度. 因我们只想用spring的工具类, 而不想把一个大大的spring工程给引入 ...

  5. [转载] nosql 数据库的分布式算法

    原文: http://juliashine.com/distributed-algorithms-in-nosql-databases/ NoSQL数据库的分布式算法 On 2012年11月9日 in ...

  6. MATLAB中的nargin与varargin的用法

    nargin的用法: nargin:number of function input arguments,指的是一个函数的输入变量的个数. 用法:nargin或着nargin(fx), 其中fx指的是 ...

  7. Android中view动画

    [1]透明 //点击按钮 实现iv 透明的效果 动画 public void click1(View v) { //1.0意味着着完全不透明 0.0意味着完全透明 AlphaAnimation aa ...

  8. SurfaceHolder.Callback

    Class Overview A client may implement this interface to receive information about changes to the sur ...

  9. iOS开发之APP推送设置WIFI

    在iOS开发过程中,有时需要连接网络.当访问请求,检测到网络不可用时,需要提示用户手动进行设置网络并告知用户操作路径设置可用的网络. 只需一行代码即可实现: - (void)viewDidLoad { ...

  10. Volley框架的流程图分析

          接着上一篇Volley框架的使用,这一篇主要主要讲Volley框架运作的原理.主要使用流程图来叙述,简单的分析了整个流程的过程,具体的请参考源代码或者查看我上一篇在文章末尾添上的链接. 一 ...