代码如下：

 <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. HDU5829 NTT

    以下这份代码并没有过.但感觉没有问题.不是蜜汁WA就是蜜汁T. #include <cstdio> #include <iostream> #include <cstri ...

  2. DDL之操作表

    DDL之操作表 DDL是数据定义语言,用来定义数据库对象:数据库.表.列等.其中定义数据库我们已经在DDL之操作数据库中详细讲解了,今天我们来学习使用DDL操作表. 1.创建表 使用数据定义语言创建表 ...

  3. Android 点击文字实现跳转

    在web页面中,有a标签的超链接实现跳转,同样在Android当中,用TextView控件来显示文字,实现它的事件来跳转. 核心代码如下: //以下代码写在onCreate()方法当中 textVie ...

  4. STM32学习笔记(二) 基于STM32-GPIO的流水灯实现

    学会了如何新建一个工程模板,下面就要开始动手实践了.像c/c++中经典的入门代码"hello world"一样,流水灯作为最简单的硬件设备在单片机领域也是入门首推.如果你已经有了一 ...

  5. [css] 自适应布局 移动端自适应

    一.宽度自适应 三列布局左右固定.中间不固定或者两列布局,左边固定右边不固定 原文链接:http://www.cnblogs.com/2050/archive/2012/07/30/2614852.h ...

  6. [http] http缓存机制

    原文链接:http://my.oschina.net/leejun2005/blog/369148 1.缓存的分类 缓存分为服务端侧(server side,比如 Nginx.Apache)和客户端侧 ...

  7. Android aidl Binder框架浅析

      转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38461079 ,本文出自[张鸿洋的博客] 1.概述 Binder能干什么?B ...

  8. Windows 内存架构

    理解 Virtual Memory, Physical Memory, Committed Memory, Page File, Working Set, Modified Pages, Standb ...

  9. VC++导入导出类

    一.导出类 VC++中导出类很简单,下面列出了两个等价的方法: 方法1: class __declspec(dllexport) CTest { public: int        m_nValue ...

  10. ARPG游戏技能系统设计

    ARPG游戏的技能的前端表现, 主要指的是人物动作和特效表现, 从普遍意义上讲,大致可以分为三个阶段:起手.飞行.碰撞(爆炸). [特效可见性判断] 1.[attacker & victim] ...