mirror of
https://github.com/MoonTechLab/LunaTV.git
synced 2026-02-04 03:36:22 +08:00
fix: search bar enter with input search
This commit is contained in:
@@ -658,6 +658,19 @@ function SearchPageClient() {
|
|||||||
isVisible={showSuggestions}
|
isVisible={showSuggestions}
|
||||||
onSelect={handleSuggestionSelect}
|
onSelect={handleSuggestionSelect}
|
||||||
onClose={() => setShowSuggestions(false)}
|
onClose={() => setShowSuggestions(false)}
|
||||||
|
onEnterKey={() => {
|
||||||
|
// 当用户按回车键时,使用搜索框的实际内容进行搜索
|
||||||
|
const trimmed = searchQuery.trim().replace(/\s+/g, ' ');
|
||||||
|
if (!trimmed) return;
|
||||||
|
|
||||||
|
// 回显搜索框
|
||||||
|
setSearchQuery(trimmed);
|
||||||
|
setIsLoading(true);
|
||||||
|
setShowResults(true);
|
||||||
|
setShowSuggestions(false);
|
||||||
|
|
||||||
|
router.push(`/search?q=${encodeURIComponent(trimmed)}`);
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ interface SearchSuggestionsProps {
|
|||||||
isVisible: boolean;
|
isVisible: boolean;
|
||||||
onSelect: (suggestion: string) => void;
|
onSelect: (suggestion: string) => void;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
|
onEnterKey: () => void; // 新增:处理回车键的回调
|
||||||
}
|
}
|
||||||
|
|
||||||
interface SuggestionItem {
|
interface SuggestionItem {
|
||||||
@@ -20,6 +21,7 @@ export default function SearchSuggestions({
|
|||||||
isVisible,
|
isVisible,
|
||||||
onSelect,
|
onSelect,
|
||||||
onClose,
|
onClose,
|
||||||
|
onEnterKey,
|
||||||
}: SearchSuggestionsProps) {
|
}: SearchSuggestionsProps) {
|
||||||
const [suggestions, setSuggestions] = useState<SuggestionItem[]>([]);
|
const [suggestions, setSuggestions] = useState<SuggestionItem[]>([]);
|
||||||
const containerRef = useRef<HTMLDivElement>(null);
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
@@ -119,6 +121,26 @@ export default function SearchSuggestions({
|
|||||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||||
}, [isVisible, onClose]);
|
}, [isVisible, onClose]);
|
||||||
|
|
||||||
|
// 处理键盘事件,特别是回车键
|
||||||
|
useEffect(() => {
|
||||||
|
const handleKeyDown = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === 'Enter' && isVisible) {
|
||||||
|
// 阻止默认行为,避免浏览器自动选择建议
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
// 关闭搜索建议并触发搜索
|
||||||
|
onClose();
|
||||||
|
onEnterKey();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isVisible) {
|
||||||
|
document.addEventListener('keydown', handleKeyDown, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => document.removeEventListener('keydown', handleKeyDown, true);
|
||||||
|
}, [isVisible, onClose, onEnterKey]);
|
||||||
|
|
||||||
if (!isVisible || suggestions.length === 0) {
|
if (!isVisible || suggestions.length === 0) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user