许多友友喜欢添加各种快捷入口到自己的页面,例如搜索,留言,工具等,加在一起容易造成单个页面过多输入框,页面稍显累赘,就要考虑把它们合并到一起,需要时点击选择即可。这里用到的是HTML的<select>标签,通过下拉框的形式选择一项,执行给定的操作,而操作部分是用JavaScript实现,细心的你会发现本人(笑忘书)的X-Moblie主题的友情链接是下拉框选择形式。

以前在我的磨里使用下拉框比较多,集合各种搜索引擎,随意切换,可谓相当方便。因为有人找我帮忙合并几个搜索代码,我并不太了解JS,但仿照前人写下的代码琢磨下其实也不难。

1,首先,获取搜索页面的URL地址前缀。一般URL地址后面都会有一串字符,这个取决于你输入的搜索内容,不过要注意的是中文内容会被转码,如这个百度搜索链接http://m.baidu.com/s?from=2001a&bd_page_type=1&word=%E7%AC%91%E5%BF%98%E4%B9%A6%E8%A8%80指向的是关于"笑忘书言"的搜索页面,后面的红色字符就是"笑忘书言"的URL转码。如果我们要加入百度搜索的话,可以将上面的链接前缀,即http://m.baidu.com/s?from=2001a&bd_page_type=1&word=复制下来,下面会用到。

相关的还有以下这些搜索前缀(都是把搜索内容放在URL链接最后):
神马搜索:http://m.sa.sm.cn/s?q=
搜狗搜索:http://wap.soso.com/sweb/search.jsp?w=&key=
维基搜索:http://zh.m.wikipedia.org/wiki/
我的磨搜索:http://35230.wodemo.com/search?q=

更多的搜索URL前缀请自行获取,获取方法:在搜索输入框输入任意字符(如"3"),查看搜索内容页面的URL地址,去掉后面的搜索内容(如"3")。

下拉框搜索

2,在下面的<select> </select>标签之间加入<option value="上面的搜索链接前缀">某某搜索</option>,如下所示:

<form>
<input type="text" name="keyword" value="" placeholder="输入关键词">
<select id="search">
<option value="http://wiki.mbalib.com/wiki/Sepcial:Search?search=">MBA百科</option>
<option value="http://doc.mbalib.com/search?z=MBA&q=">MBA文库</option>
</select>
<input type="button" value="搜索" onclick="location.href=document.getElementById('search').value+document.getElementsByName('keyword')[0].value;">
</form>

可以随意增添多项搜索工具,确保地址前缀正确即可。当然你也可以把某些页面链接地址放进去作为快捷入口。

附上一个简单的HTML下拉框多搜索Demo:

 <form>
<input type="text" name="keyword" value="" placeholder="输入关键词">
<select id="search">
<option value="http://wap.soso.com/sweb/search.jsp?w=&key=">搜狗搜索</option>
<option value="http://zh.m.wikipedia.org/wiki/">维基搜索</option>
<option value="http://35230.wodemo.com/search?q=">磨盘搜索</option>
<option value="http://m.baidu.com/s?word=">百度搜索</option>
<option value="http://wiki.mbalib.com/wiki/Sepcial:Search?search=">MBA百科</option>
<option value="http://doc.mbalib.com/search?z=MBA&q=">MBA文库</option>
</select>
<input type="button" value="搜索" onclick="location.href=document.getElementById('search').value+document.getElementsByName('keyword')[0].value;">
</form>

演示地址:http://xiaows.com/demo/selectsearch.html

全文完