文享日志

AggregationSearch聚合搜索

JavaScript

发表于2018年06月16日20:33:40

更新于2018年06月16日21:04:11

0条评论 259次阅读

aggregation-search.js

简单高效的聚合搜索代码。

当你的网站需要聚合搜索功能的时候,你可能会自行查找获取各大站点的搜索API接口,集成到自己的项目中。或者找一个现成的第三方聚合工具。


自行查找搜索接口集成到项目中面临效率低下的问题。 

使用第三方聚合工具有着功能繁多配置复杂的问题。


于是,这个小插件产生了。


特性

简单、高效。本插件只支持十三种最常用的搜索功能(百度、360、Bing、谷歌、淘宝、京东、知乎、微博、豆瓣、高德、网盘、学术),并可以根据自己需求增加新的搜索方式。

所以只有几十行代码体积 1kb 左右。直接引入使用即可无须依赖其他库。


用法

1,在页面中引入js代码


2,创建实例

new 一个实例并进行初始化

var search_box = new SearchBox();
search_box.init({});


在页面上触发调用

<input type="text" id="searchBoxInput">

<div id="searchBoxBtn">


或者自定义初始化

var search_box = new SearchBox();
search_box.init({
      searchBoxInput: document.getElementsByClassName('yourClass')[0],
      searchBoxBtn: document.getElementsByClassName('yourClass')[0],
      searchType: ['百度', '360', '淘宝', '京东']
});


初始化参数可选 searchBoxInput与searchBoxBtn,初始化选项中无这两个参数时,会默认查找id值为searchBoxInput的元素与id值为searchBoxBtn的元素。

searchType,选项中没有这个参数,默认展示所有内置搜索。


实例调用,请参照 test/search.html 与test/search2.htm


样式

搜索按钮样式类名为searchTypeBtn,在CSS中添加样式即可。


API

为了保证简洁,暴露三个API函数:

get()函数,获取当前所有搜索类型

var search_box = new SearchBox();
search_box.get()


add()函数,添加自定义搜索类型

var search_box = new SearchBox();
search_box.add({
    "思否":"https://segmentfault.com/search?q="
})
search_box.get()


init()函数,初始化聚合搜索对象

var search_box = new SearchBox();
search_box.init({
    searchBoxInput: document.getElementsByClassName('yourClass')[0],
    searchBoxBtn: document.getElementsByClassName('yourClass')[0],
    searchType: ['百度', '360', '淘宝', '京东']
});


协议

MIT


地址

https://github.com/LuckyHH/AggregationSearch


👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广