Kasan Blog

双搜索引擎的一种简单写法

思路:先用form表单写出input和button

通过js监听两个button,去百度就把name改成wd,把action改为百度的,谷歌同理

这样通过修改form的属性,就可以做到一个input两个按钮就可以用两个搜索引擎搜索

        <form class="searchForm"  method="get"  
            action="https://www.baidu.com/s">  
            <!-- action和input 的name属性都会被js覆盖掉,这里写上是为了即使js的函数挂了依然可以用百度搜索,函数正常的情况下不写也可以运行 -->
			<input  class="searchInput" type="text" name="wd" placeholder="请输入关键词" />
            <button class="baiDuSearch"  type="submit">百度</button>
            <button class="googleSearch" type="submit">谷歌</button>
        </form>    
$(".baiDuSearch").click(function () {
        $(".searchForm").attr('action', 'https://www.baidu.com/s');    //jQuery的attr方法可以覆盖一个属性
        //这里是把form标签的action属性修改为https://www.baidu.com/s
        $(".searchInput").attr('name', 'wd');    //通过jquery为name属性赋值
        $(".searchForm").submit();    //提交class为searchForm的表单
    })

$(".googleSearch").click(function () {
        $(".searchForm").attr('action', 'https://www.google.com.hk/search');    //通过jquery为action属性赋值
        $(".searchInput").attr('name', 'q');    //通过jquery为name属性赋值
        $(".searchForm").submit();    //提交class为searchForm的表单   
    })