feat(auto): 搜索建议
This commit is contained in:
parent
8af87cd9f4
commit
e67479489a
@ -383,10 +383,7 @@
|
|||||||
|
|
||||||
/* 搜索建议 */
|
/* 搜索建议 */
|
||||||
.search-suggestions {
|
.search-suggestions {
|
||||||
position: absolute;
|
position: relative;
|
||||||
top: calc(var(--header-height) + 1px);
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
background: var(--bg-primary);
|
background: var(--bg-primary);
|
||||||
border-bottom: 1px solid var(--border-color);
|
border-bottom: 1px solid var(--border-color);
|
||||||
max-height: 60vh;
|
max-height: 60vh;
|
||||||
|
|||||||
@ -177,6 +177,8 @@ const App = (function() {
|
|||||||
$('#search-clear').addClass('hidden');
|
$('#search-clear').addClass('hidden');
|
||||||
$('#search-results').html('<div class="search-hint">输入关键词搜索小说</div>');
|
$('#search-results').html('<div class="search-hint">输入关键词搜索小说</div>');
|
||||||
$('#search-suggestions').html('').addClass('hidden');
|
$('#search-suggestions').html('').addClass('hidden');
|
||||||
|
// 清空时重新显示搜索历史和标签
|
||||||
|
renderSearchTags();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -419,6 +421,27 @@ const App = (function() {
|
|||||||
$(this).text($text.hasClass('text-clamp-3') ? '展开' : '收起');
|
$(this).text($text.hasClass('text-clamp-3') ? '展开' : '收起');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 点击搜索建议项
|
||||||
|
$(document).on('click', '.suggestion-item', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
const novelId = $(this).data('novel-id');
|
||||||
|
const author = $(this).data('author');
|
||||||
|
|
||||||
|
if (novelId) {
|
||||||
|
// 跳转到小说详情
|
||||||
|
hideSearch();
|
||||||
|
setTimeout(() => {
|
||||||
|
navigate('#/novel/' + novelId);
|
||||||
|
}, 100);
|
||||||
|
} else if (author) {
|
||||||
|
// 按作者搜索
|
||||||
|
$('#search-input').val(author);
|
||||||
|
$('#search-suggestions').html('').addClass('hidden');
|
||||||
|
doSearch(author);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// 加载更多按钮(使用事件委托,在pages.js中也有绑定,这里作为备用)
|
// 加载更多按钮(使用事件委托,在pages.js中也有绑定,这里作为备用)
|
||||||
$(document).on('click', '.load-more-btn', function() {
|
$(document).on('click', '.load-more-btn', function() {
|
||||||
if (Pages.hasMore()) {
|
if (Pages.hasMore()) {
|
||||||
@ -447,23 +470,27 @@ const App = (function() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
console.log('正在加载搜索建议,关键词:', keyword);
|
||||||
const suggestions = await API.getSearchSuggestions(keyword, 8);
|
const suggestions = await API.getSearchSuggestions(keyword, 8);
|
||||||
if (suggestions.length === 0) {
|
console.log('搜索建议结果:', suggestions);
|
||||||
|
|
||||||
|
if (!suggestions || suggestions.length === 0) {
|
||||||
$('#search-suggestions').html('').addClass('hidden');
|
$('#search-suggestions').html('').addClass('hidden');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let html = '<div class="suggestions-list">';
|
let html = '<div class="suggestions-list">';
|
||||||
suggestions.forEach(suggestion => {
|
suggestions.forEach(suggestion => {
|
||||||
|
if (!suggestion || !suggestion.text) return;
|
||||||
const highlightText = highlightKeyword(suggestion.text, keyword);
|
const highlightText = highlightKeyword(suggestion.text, keyword);
|
||||||
if (suggestion.novelId) {
|
if (suggestion.novelId) {
|
||||||
html += `<div class="suggestion-item" data-novel-id="${suggestion.novelId}">
|
html += `<div class="suggestion-item" data-novel-id="${suggestion.novelId}">
|
||||||
<span class="suggestion-type">${suggestion.type}</span>
|
<span class="suggestion-type">${suggestion.type || '书名'}</span>
|
||||||
<span class="suggestion-text">${highlightText}</span>
|
<span class="suggestion-text">${highlightText}</span>
|
||||||
</div>`;
|
</div>`;
|
||||||
} else {
|
} else {
|
||||||
html += `<div class="suggestion-item" data-author="${suggestion.text}">
|
html += `<div class="suggestion-item" data-author="${suggestion.text}">
|
||||||
<span class="suggestion-type">${suggestion.type}</span>
|
<span class="suggestion-type">${suggestion.type || '作者'}</span>
|
||||||
<span class="suggestion-text">${highlightText}</span>
|
<span class="suggestion-text">${highlightText}</span>
|
||||||
</div>`;
|
</div>`;
|
||||||
}
|
}
|
||||||
@ -471,6 +498,7 @@ const App = (function() {
|
|||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
$('#search-suggestions').html(html).removeClass('hidden');
|
$('#search-suggestions').html(html).removeClass('hidden');
|
||||||
|
console.log('搜索建议已显示,HTML长度:', html.length);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('加载搜索建议失败:', error);
|
console.error('加载搜索建议失败:', error);
|
||||||
$('#search-suggestions').html('').addClass('hidden');
|
$('#search-suggestions').html('').addClass('hidden');
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user