用javascript打造搜索工具栏

一:最终效果

二:原理

如果你在Yahoo中搜索“中国”，那么在浏览器的地址栏将得到这样一串地址：http://search.cn.yahoo.com/search?ei=gbk&fr=fp-tab-web-ycn&meta=vl%
3Dlang_zh-CN%26vl%3Dlang_zh-TW&pid=ysearch&source=ysearch_www_hp_button
&p=%D6%D0%B9%FA&Submit=
看上去有些乱了，简化一下：http://search.cn.yahoo.com/search?&p=%D6%D0%B9%FA
这就是关键.其中&p=%D6%D0%B9%FA是搜索的关键字参数，而%D6%D0%B9%FA是“中国”的
Url编码。OK，我们只要能构造出这样的编码就好了。

三：URL编码
JavaScript的encodeURIComponent()函数可以完成编码工作。
比如上面的例子我们可以用“http://search.cn.yahoo.com/search?&p=”＋encodeURIComponent(“中国”)；来完成。

四：代码
(点击加号展开）


代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Search.aspx.cs" Inherits="Search" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
 <head runat="server">
     <title>Search</title>
 <script language="javascript" type="text/javascript">
 // <!CDATA[

function GetEncodeOfKey()
 {
     var strKey = window.document.getElementById("Text_Key").value;      
     return  encodeURIComponent(strKey); 
 }

function GetUrl(site)
 {
     var encode=GetEncodeOfKey();

//web
     if(document.getElementById("RadioButtonList_Kind_0").checked)
     {
         if(site=="google")
         {
             return "http://www.google.com/search?q="+encode+"&ei=UTF-8";
         }
         else
         {
             return "http://search.yahoo.com/search?p="+encode+"&ei=UTF-8";
         }
     }
     //mp3
     else if(document.getElementById("RadioButtonList_Kind_1").checked)
     {
         if(site=="google")
         {
             return "http://www.google.com/search?q="+encode+" mp3"+"&ei=UTF-8";
         }
         else
         {
             return "http://audio.search.yahoo.com/search/audio?&p="+encode+"&ei=UTF-8";

}
     }
     //img
     else if(document.getElementById("RadioButtonList_Kind_2").checked)
     {
         if(site=="google")
         {
             return "http://images.google.com/images?q="+encode+"&ei=UTF-8";
         }
         else
         {
             return "http://images.search.yahoo.com/search/images?p="+encode+"&ei=UTF-8";
         }
     }
     else
     {
         //alert("err");
     }

}

function Button_Google_onclick() 
 {
     window.open(GetUrl("google"));
 }

function Button_Yahoo_onclick() 
 {
     window.open(GetUrl("yahoo"));
 }

// ]]>
 </script>
 </head>
 <body>
     <form id="form1" runat="server">
     <div>
         <br />
         <br />
         <strong><span style="font-size: 24pt; color: #336633">Search<br />
         </span></strong>
     </div>
     <hr style="position: relative" />
         <br />
         <table style="left: 0px; position: relative; top: 0px">
             <tr>
                 <td style="width: 31px; height: 21px">
                     <span style="font-family: Terminal">Key</span></td>
                 <td style="width: 253px; height: 21px">
                     <input id="Text_Key" style="width: 248px; position: relative" type="text" /></td>
                 <td style="width: 175px; height: 21px">
                     <asp:RadioButtonList ID="RadioButtonList_Kind" runat="server" RepeatDirection="Horizontal"
                         Style="position: relative" Font-Names="terminal">
                         <asp:ListItem Selected="True">Web</asp:ListItem>
                         <asp:ListItem>Mp3</asp:ListItem>
                         <asp:ListItem>Image</asp:ListItem>
                     </asp:RadioButtonList></td>
             </tr>
             <tr>
                 <td style="width: 31px">
                 </td>
                 <td colspan="2">
                     <input id="Button_Google" style="width: 80px; position: relative" type="button" value="Google" onclick="return Button_Google_onclick()" />
                              
                     <input id="Button_Yahoo" style="left: -29px; width: 104px; position: relative" type="button"
                         value="Yahoo!" onclick="return Button_Yahoo_onclick()" /></td>
         </table>
         <br />
         <hr style="position: relative" />
         <asp:HyperLink ID="HyperLink_Home" runat="server" NavigateUrl="~/Default.aspx" Style="position: relative">Home</asp:HyperLink></form>
 </body>
 </html>

赞 (0)

相关推荐

  • 用javascript打造搜索工具栏

    用javascript打造搜索工具栏

    一:最终效果 二:原理 如果你在Yahoo中搜索"中国",那么在浏览器的地址栏将得到这样一串地址:http://search.cn.yahoo.com/search?ei=gbk&fr=fp-tab-web-ycn&meta=vl%3Dlang_zh-CN%26vl%3Dlang_zh-TW&pid=ysearch&source=ysearch_www_hp_button&p=%D6%D0%B9%FA&Submit=看上去有些乱了,简化一

  • 一步步教你使用JavaScript打造一个扫雷游戏

    一步步教你使用JavaScript打造一个扫雷游戏

    目录 前言 一.思路分析 二.静态页面搭建 2.1 结构层 2.2 样式层 三.js页面交互 3.1 获取元素及变量初始化 3.2 10个雷的初始化设置 3.3 游戏开始事件封装 3.4 核心事件函数封装 3.5 游戏开始 四.总结 前言 扫雷大家都玩过,今天我们就是用JavaScript来打造扫雷游戏.废话不多说,直接看下效果; 上图是失败后的结果. 一.思路分析 我们新建一个首页,在首页放置一个点击开始游戏的按钮,动态生成100个小格,即100div;然后通过点击div进行扫雷操作,然后扫雷

  • 基于JavaScript打造一款桌面级便签系统

    基于JavaScript打造一款桌面级便签系统

    先看下效果: 载体就是一个网页,用html,css和JavaScript实现一个简单的便签系统. 动画效果用的是animation.css库,缓存用的localStorage. 除非手动清空便签,否则便签会一直保留,非常方便. 鼠标右键可以点开菜单. 代码: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset

  • JavaScript实现搜索框的自动完成功能(一)

    在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的. 先给大家展示下效果图: 实现这个功能需要服务端配合.客户端通过脚本来展示从服务端取得的数据. 先看客户端的HTML: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT

  • javascript实现搜索筛选功能实例代码

    案例样式即功能 HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet"

  • JavaScript实现搜索的数据显示

    JavaScript实现搜索的数据显示

    本文实例为大家分享了JavaScript实现搜索的数据显示代码,供大家参考,具体内容如下 今天的效果如下: 这个案例的要点有两个: 一是使用CSS显示样式 二是使用js比较输入的内容和数组中的内容使得包含输入内容的数据显示出来 首先来看CSS显示样式的难点: 两个div的接触部分,要想让它们无缝隙接触,就需要设置float:left: 两个div盒子左右两侧的圆角边框,我们需要分别为border-top-left-radius等设置值,这样就大致得到了搜索框的样式,剩下的细节可以去代码中查看~

  • javascript下搜索子字符串的的实现代码(脚本之家修正版)

    例如有这么一个字符串<img src='test' alt=123>xtxtxt<img src='test' alt=321>1221<img src='test' alt=yes>,我要从中找出所以alt的值,同时还有非标签中的值,想这个例子中,就是要搜索出123xtxtxt3211221yes这个结果来 ,还有一点就是 原字符串是不确定的,是由用户输入的 test //搜索出所有alt的值和innerHTML的值 var tmp=""; var

  • jsp+javascript打造级连菜单的实例代码

    复制代码 代码如下: <%@ page import="java.util.Date,yava.fileapp.*,java.sql.*;"         contentType="text/html;charset=GB2312" pageEncoding="GB2312"  %>  <style>  .f9{ font-size:9pt; }  .bgc{ background-color:#AECAF9; colo

  • 用html css javascript打造自己的RIA图文教程第1/2页

    用html css javascript打造自己的RIA图文教程第1/2页

    在制作之前,先建立开发环境.打开netbeans6.1,在项目工作区,右击新建项目,选择Web目录下的Web应用程序. 项目名称输入 RIADemo . 选择运行的服务器以及 java ee 标准. 在这里选择tomcat5.0,j2ee1.4,本文介绍例子,并不依赖于服务器,因为html&css&javascript本身都是静态的,做完以后就是一个html文件.严格意义上的web程序肯定是要有一个服务器来运行的,netbeans还是采用了这种管理理念.在这一步,已经可以点击完成建立项目,

  • javascript打造跨浏览器事件处理机制[Blue-Dream出品]

    使用类库可以比较容易的解决兼容性问题.但这背后的机理又是如何呢? 下面我们就一点点铺开来讲. 首先,DOM Level2为事件处理定义了两个函数addEventListener和removeEventListener, 这两个函数都来自于EventTarget接口.  复制代码 代码如下: element.addEventListener(eventName, listener, useCapture); element.removeEventListener(eventName, listen

随机推荐