添加搜索词建议源(bilibili)

默认情况下从百度搜索的接口获取搜索词建议,
若选择的搜索引擎存在对应的接口,
则请求对应的接口获取搜索词建议。
This commit is contained in:
2021-07-13 19:10:39 +08:00
parent 93656fc4dc
commit 3e2411d66d

View File

@@ -74,10 +74,20 @@
<div class="suggestion shadow-3"> <div class="suggestion shadow-3">
<ul> <ul>
<li <li
v-for="item in searchEngine.suggestions" v-for="item in searchEngine.suggest.list"
:key="item.id" :key="item.id"
@click="searchEngine.keyword = item.label" @click="searchEngine.keyword = item.label"
>{{ item.label }}</li> >
<!-- 文本 -->
<span class="label">{{ item.label }}</span>
<!-- 来源 -->
<el-tag
class="tag"
effect="plain"
size="mini"
type="success"
>{{ searchEngine.suggest.name }}</el-tag>
</li>
</ul> </ul>
</div> </div>
@@ -237,7 +247,10 @@ export default {
list: this.$root.config.searchEngines, list: this.$root.config.searchEngines,
url: '', url: '',
debounce: null, debounce: null,
suggestions: [], suggest: {
list: [],
name: '',
},
}, },
// 导航链接 // 导航链接
navLinks: this.$root.navLinks, navLinks: this.$root.navLinks,
@@ -271,7 +284,7 @@ export default {
var isShow = ( var isShow = (
(se.isFocus) && (se.isFocus) &&
(se.keyword !== '') && (se.keyword !== '') &&
(se.suggestions.length > 0) (se.suggest.list.length > 0)
); );
return isShow; return isShow;
@@ -286,6 +299,7 @@ export default {
} }
clearInterval(this.searchEngine.debounce); clearInterval(this.searchEngine.debounce);
this.searchEngine.debounce = setTimeout(() => { this.searchEngine.debounce = setTimeout(() => {
value = window.encodeURIComponent(value);
this.searchEngineGS(value); this.searchEngineGS(value);
}, 500); }, 500);
} }
@@ -381,34 +395,82 @@ export default {
* @param {string} keyword 当前输入的关键词 * @param {string} keyword 当前输入的关键词
*/ */
searchEngineGS(keyword) { searchEngineGS(keyword) {
var se = this.searchEngine; var suggest = this.searchEngine.suggest;
var reqURL = `https://www.baidu.com/sugrec?json=1&prod=pc&wd=${keyword}&cb=cbSES`; // 设置的搜索引擎名称
var configSE = this.config.searchEngine;
// 关键词建议来源信息(默认使用百度)
var reqURLs = [
{
name: '百度',
url: `https://www.baidu.com/sugrec?json=1&prod=pc&wd=${keyword}&cb=cbSES`
},
{
name: 'bilibili',
url: `https://s.search.bilibili.com/main/suggest?func=suggest&main_ver=v1&term=${keyword}&jsonp=jsonp&callback=cbSES`
},
];
var reqURL = reqURLs[0].url;
se.suggestions = []; suggest.list = [];
suggest.name = reqURLs[0].name;
if (keyword === '') { if (keyword === '') {
return; return;
} }
var cbFunc = (data) => { // 根据当前搜索引擎选择请求地址
var word = (data.q || ''); // 当前关键词 for (let i = 0; i < reqURLs.length; i++) {
var result = (data.g || []); // 建议 let item = reqURLs[i];
var id = 0; // ID if (item.name === configSE) {
reqURL = item.url;
suggest.name = item.name;
break;
}
}
if (result.length === 0) { // 处理数据
return; var cbFunc = (data) => {
var id = 0; // 结果 ID
var reqName = suggest.name; // 来源名称
if (reqName === '百度') {
// [百度]
let result = (data.g || []);
if (result.length === 0) {
return;
}
result.forEach((item) => {
id += 1;
suggest.list.push({
id,
label: item.q,
highlight: keyword
});
});
} else if (reqName === 'bilibili') {
// [bilibili]
let result = (data.result ? (data.result.tag || []) : []);
if (result.length === 0) {
return;
}
result.forEach((item) => {
id += 1;
suggest.list.push({
id,
label: item.value,
highlight: keyword
});
});
} }
result.forEach((item) => {
id += 1;
se.suggestions.push({
id,
label: item.q,
highlight: word
});
});
}; };
// 使用 JSONP 获取
this.utils.jsonp({ this.utils.jsonp({
url: reqURL, url: reqURL,
cbName: 'cbSES', cbName: 'cbSES',
@@ -613,6 +675,9 @@ export default {
} }
li { li {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
cursor: pointer; cursor: pointer;
@@ -620,6 +685,15 @@ export default {
background-color: @colorWhite; background-color: @colorWhite;
} }
} }
.label {
flex-grow: 1;
padding-right: 0.5em;
}
.tag {
flex-shrink: 0;
}
} }
&.suggest .suggestion { &.suggest .suggestion {
visibility: visible; visibility: visible;