代码如下：

 <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. iOS - OC NSLocale 本地化信息

    前言 @interface NSLocale : NSObject <NSCopying, NSSecureCoding> NSLocale 类返回本地化信息,主要体现在"语言& ...

  2. c++复习一：复数运算的简单实现。

    复数运算的简单实现. 程序很简单了.基本忘光了复数,重新了解了基本概念.如何在平面表示一个复数,复数的长度|x|=开根 a^2+b^2.和四则运算. 程序基本点: 封装和抽象: 1)封装成员数据,私有 ...

  3. 批量创建客户主数据函数SD_CUSTOMER_MAINTAIN_ALL

    分享一下批创建客户主数据函数:SD_CUSTOMER_MAINTAIN_ALL TABLES:T077D,ZCITY,T005S,BNKA,ADRC,KNA1.  DATA: TMP_KTOKD(4) ...

  4. spring DI原理

    什么是IOC? 也称依赖注入 当一个类,需要另一个类的时候,我们不需要再另一个类里进行创建 对象,spring容器会给我们自动的创建 IOC的实现? 通过一定的技术读取spring.xml文件信息,比 ...

  5. As Easy As Possible

    题目链接 题意:一个只含e, a, s, y的字符串,问[l, r]内有多少个easy序列? 题解:倍增. #include <bits/stdc++.h> using namespace ...

  6. C++中关于new及内存地址的思考

    OJ题刷多了,每次都是直接分配内存,那么,你还记得怎么动态分配内存吗? ———————————————————————————————————— 我们知道,使用malloc/calloc等分配内存的函 ...

  7. JS 对象（Object）和字符串（String）互转

    利用原生JSON对象,将对象转为字符串 var jsObj = {}; jsObj.testArray = [1,2,3,4,5]; jsObj.name = 'CSS3'; jsObj.date = ...

  8. CentOS6.x最下化安装及优化配置

    一.最小化安装自定义额外包组 1.1 选择最小化安装 1.2 自定义额外的包组 Base System的选择 Development的选择 如果需要中文的支持可以在Languages中勾选中文 1.3 ...

  9. 转！Java关键字final、static使用总结

    Java关键字final.static使用总结   一.final 根据程序上下文环境,Java关键字final有“这是无法改变的”或者“终态的”含义,它可以修饰非抽象类.非抽象类成员方法和变量.你可 ...

  10. VIM 打造 c/c++ IDE

    1. vim 的安装 $sudo apt-get install vim vim-scripts vim-doc <br> 其中vim-scripts包含了vim的一些基本插件,包括语法高 ...