1、调用搜索引擎需要用到javascript语句:通用格式为<script type="text/javascript">function s_1(){window.open("http://www.google.com/search?hl=zh-CN&q="+encodeURI(f_g1.key.value));return false;};</script>中间用黑体标出的就是搜索引擎的调用接口,可以替换成其他的。这些语句可以获得相应的搜索框中的值,并进行搜索。
2、在此列出一些常用的搜索引擎接口:谷歌搜索:http://www.google.com.hk/search?hl=zh-CN&锾攒揉敫amp;source=hp&q=百度搜索:http://www.baidu.com/s?wd=百度贴吧:http://tieba.baidu.com/f?kw=百度图片:http://image.baidu.com/i?ct=201326592&&word=百度音乐:http://mp3.baidu.com/m?tn=baidump3&ct=134217728&lm=-1&word=优酷搜索:http://www.soku.com/v?keyword=必应搜索:http://cn.bing.com/search?q=土豆搜索:http://so.tudou.com/isearch/有道搜索:http://www.youdao.com/search?q=使用时在后面附加即可,如下:<script type="text/javascript">function s_1(){window.open("http://www.google.com/search?hl=zh-CN&q="+encodeURI(f_g1.key.value));return false;};function s_2(){window.open("http://www.baidu.com/baidu?tn=gg5g&word="+encodeURI(f_g2.key.value));return false;};function s_3(){window.open("http://www.sogou.com/web?query="+encodeURI(f_g3.key.value));return false;};</script>
3、接下来是html和css的一些代码操作。对于搜索框,使用如下代码:<FORM name="f_g1" onsubmit="return(s_1())" class="navbar-form navbar-left" role="search"> <div class="form-group"> <input onblur="if (value ==''){value=''}" onfocus="this.select()" name="key" type="text" class="form-control" placeholder="Google搜索"> </div> <button type="submit" class="btn btn-default" onclick="s_1()">谷歌</button> </form>(笔者在此使用的是bootstrap开发框架,不熟悉的同学可以百度相关内容。)注意name值需与上文中javascript匹配,“encodeURI(f_g1.key.value));”需要注意的已用黑体标出,替换即可。
4、下面给出最终的代码:(一些重复内容可复制)<!DOCTYPE html><html><he锾攒揉敫ad></head><body><FORM name="f_g1" onsubmit="return(s_1())" class="navbar-form navbar-left" role="search"> <div class="form-group"> <input onblur="if (value ==''){value=''}" onfocus="this.select()" name="key" type="text" class="form-control" placeholder="Google搜索"> </div> <button type="submit" class="btn btn-default" onclick="s_1()">谷歌</button> </form><FORM name="f_g2" onsubmit="return(s_2())" class="navbar-form navbar-left" role="search"> <div class="form-group"> <input onblur="if (value ==''){value=''}" onfocus="this.select()" name="key" type="text" class="form-control" placeholder="baidu搜索"> </div> <button type="submit" class="btn btn-default" onclick="s_2()">百度</button> </form><FORM name="f_g3" onsubmit="return(s_3())" class="navbar-form navbar-left" role="search"> <div class="form-group"> <input onblur="if (value ==''){value=''}" onfocus="this.select()" name="key" type="text" class="form-control" placeholder="sougou搜索"> </div> <button type="submit" class="btn btn-default" onclick="s_3()">搜狗</button> </form><FORM name="f_g5" onsubmit="return(s_5())" class="navbar-form navbar-left" role="search"> <div class="form-group"> <input onblur="if (value ==''){value=''}" onfocus="this.select()" name="key" type="text" class="form-control" placeholder="Bing搜索"> </div> <button type="submit" class="btn btn-default" onclick="s_5()">必应</button> </form><FORM name="f_g4" onsubmit="return(s_4())" class="navbar-form navbar-left" role="search"> <div class="form-group"> <input onblur="if (value ==''){value=''}" onfocus="this.select()" name="key" type="text" class="form-control" placeholder="souku搜索"> </div> <button type="submit" class="btn btn-default" onclick="s_4()">优酷</button> </form><FORM name="f_g6" onsubmit="return(s_6())" class="navbar-form navbar-left" role="search"> <div class="form-group"> <input onblur="if (value ==''){value=''}" onfocus="this.select()" name="key" type="text" class="form-control" placeholder="百度图片搜索"> </div> <button type="submit" class="btn btn-default" onclick="s_6()">图片</button> </form><script type="text/javascript">function s_1(){window.open("http://www.google.com/search?hl=zh-CN&q="+encodeURI(f_g1.key.value));return false;};function s_2(){window.open("http://www.baidu.com/baidu?tn=gg5g&word="+encodeURI(f_g2.key.value));return false;};function s_3(){window.open("http://www.sogou.com/web?query="+encodeURI(f_g3.key.value));return false;};function s_4(){window.open("http://www.soku.com/v?keyword="+encodeURI(f_g4.key.value));return false;};function s_5(){window.open("http://cn.bing.com/search?q="+encodeURI(f_g5.key.value));return false;};function s_6(){window.open("http://image.baidu.com/i?ct=201326592&&word="+encodeURI(f_g6.key.value));return false;};</script><body></html>
5、这是我最终做成的效果图: