添加搜索词建议源(bilibili)
默认情况下从百度搜索的接口获取搜索词建议, 若选择的搜索引擎存在对应的接口, 则请求对应的接口获取搜索词建议。
This commit is contained in:
@@ -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;
|
||||||
|
Reference in New Issue
Block a user