代码如下：

 <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. c++ IO的继承结构

    #include <stdio.h> #include <iostream>//cin,cout #include <sstream>//ss transfer. ...

  2. [转载] 分析Linux内核创建一个新进程的过程

    http://blog.luoyuanhang.com/2015/07/27/%E5%88%86%E6%9E%90Linux%E5%86%85%E6%A0%B8%E5%88%9B%E5%BB%BA%E ...

  3. [转载] 每周推荐阅读 BFQ：实现IO的隔离共享与高吞吐访问

    磁盘IO和网络IO隔离与共享是混部应用中基本需求,从早些年的BVC到现在的Matrix,以及Galaxy,或者未来的BS/Mint混部都遇到类似的问题:由于无法有效实现IO级的隔离(包括吞吐隔离.延时 ...

  4. bootstrap学习笔记<七>（图标，图像）

    图像 bootstrap为图像预加载提供了很简洁的样式.(CDN:http://placehold.it/140x140:) PS:该CDN链接后的140x140可以根据网站需要更换合适的尺寸.例如: ...

  5. Data truncated for column xxx

    对于字段XXX,数据发生截断.原因是:字段的取值,不满足约束条件.比如下面的情况: 原来的字段取值为null,现在约束字段not null,就会报错Data truncated for column ...

  6. Struts2配置文件

    Struts2配置文件 简介: 与Struts2相关的配置文件有好几个,常用的有 struts.properties , web.xml, struts.xml等.web.xml中配置Struts2的 ...

  7. 转！！Java垃圾回收机制

    1. 垃圾回收的意义 在C++中,对象所占的内存在程序结束运行之前一直被占用,在明确释放之前不能分配给其它对象:而在Java中,当没有对象引用指向原先分配给某个对象的内存时,该内存便成为垃圾.JVM的 ...

  8. spring源码深度解析-2功能扩展

    容器功能的扩展ApplicationContext用于扩展BeanFactory中现有的功能.究竟多出了哪些功能,进一步探索.写法上:BeanFactory bf = new XmlBeanFacto ...

  9. php正则：匹配()，{}，[]小括号，大括号，中括号里面的内容

    php正则:匹配(),{},[]小括号,大括号,中括号里面的内容 比如有一段字符: $s='60c8 {"code":"200","message&q ...

  10. 【转】loading 三种实现方式

    转载:http://www.eoeandroid.com/forum.php?mod=viewthread&tid=76872 一.通过动画实现 定义res/anim/loading.xml如 ...