名称: 实现搜索过滤描述: 为前端（React/TypeScript）和后端（Python）实现搜索和过滤接口，包括防抖、查询管理和数据库集成。适用于添加搜索功能、构建过滤UI、实现分面搜索或优化搜索性能时使用。

搜索与过滤实现

实现全面的前端组件和后端查询优化的搜索与过滤接口。

目的

此技能提供生产就绪的模式，用于在全栈中实现搜索和过滤功能。它涵盖前端（搜索输入、过滤UI、自动完成）的React/TypeScript组件和后端（SQLAlchemy查询、Elasticsearch集成、API设计）的Python模式。技能强调性能优化、可访问性和用户体验。

何时使用

构建带类别和价格过滤的产品搜索
实现自动完成/类型提前搜索
创建带动态计数的分面搜索界面
为数据表或列表添加搜索
为高级用户构建布尔搜索
使用SQLAlchemy或Django ORM实现后端搜索
集成Elasticsearch进行全文搜索
通过防抖和缓存优化搜索性能
创建可访问的搜索体验

核心组件

前端搜索模式

带防抖的搜索输入

实现300ms防抖以提升性能
搜索期间显示加载状态
重置的清除按钮（X）
键盘快捷键（Cmd/Ctrl+K）
参见 references/search-input-patterns.md

自动完成/类型提前

带键盘导航的建议下拉菜单
高亮建议中的匹配文本
最近搜索和热门项目
通过防抖防止请求泛滥
参见 references/autocomplete-patterns.md

过滤UI组件

多选复选框过滤器
数值范围滑块
单选下拉过滤器
显示活动选择的过滤芯片
参见 references/filter-ui-patterns.md

后端查询模式

数据库查询构建

使用SQLAlchemy进行动态查询构建
Django ORM过滤链
搜索列的索引优化
PostgreSQL中的全文搜索
参见 references/database-querying.md

Elasticsearch集成

文档索引策略
复杂搜索的查询DSL
分面聚合
相关性评分和提升
参见 references/elasticsearch-integration.md

API设计

RESTful搜索端点
查询参数验证
使用游标/偏移的分页
响应缓存策略
参见 references/api-design.md

实现工作流

客户端搜索（<1000项）

将数据加载到内存中
在JavaScript中实现过滤函数
在文本输入上应用防抖搜索
即时更新结果
在React中维护过滤状态

服务器端搜索（>1000项）

设计搜索API端点
验证和清理查询参数
动态构建数据库查询
应用分页
返回带元数据的结果
缓存频繁查询

混合方法

使用客户端过滤提供即时反馈
在后台获取服务器结果
合并和去重结果
逐步更新UI
本地缓存最近搜索

性能优化

前端优化

防抖实现

使用lodash的debounce或自定义实现
在新输入时取消待处理请求
获取期间显示骨架加载器
脚本：scripts/debounce_calculator.js

查询参数管理

将过滤器与URL同步以实现可共享搜索
使用React Router或Next.js进行URL状态管理
压缩复杂查询
参见 references/query-parameter-management.md

后端优化

查询优化

创建适当的数据库索引
使用查询分析器识别瓶颈
实现查询结果缓存
脚本：scripts/generate_filter_query.py

验证与安全

清理所有搜索输入
防止SQL注入
限速搜索端点
脚本：scripts/validate_search_params.py

可访问性要求

ARIA模式

使用role="search"指定搜索区域
实现aria-live用于结果更新
为过滤器提供清晰标签
支持仅键盘导航

键盘支持

通过Tab键遍历所有交互元素
使用箭头键导航自动完成
使用Escape键关闭下拉菜单
使用Enter键选择/提交

技术栈

前端库

主要：Downshift（自动完成）

可访问的自动完成原语
无头/无样式以保持灵活性
WAI-ARIA合规
安装：npm install downshift

备选：React Select

功能齐全的选择/过滤组件
内置异步搜索
多选支持

后端技术

Python/SQLAlchemy

动态查询构建
关系加载优化
查询结果分页

Python/Django

Django Filter后端
Django REST Framework过滤器
使用PostgreSQL进行全文搜索

Elasticsearch（Python）

elasticsearch-py客户端
elasticsearch-dsl用于查询构建

捆绑资源

参考资料

references/search-input-patterns.md - 输入实现
references/autocomplete-patterns.md - 类型提前模式
references/filter-ui-patterns.md - 过滤组件
references/database-querying.md - SQL查询模式
references/elasticsearch-integration.md - Elasticsearch设置
references/api-design.md - API端点模式
references/performance-optimization.md - 性能提示
references/library-comparison.md - 库评估

脚本

scripts/generate_filter_query.py - 构建SQL/ES查询
scripts/validate_search_params.py - 验证输入
scripts/debounce_calculator.js - 计算防抖时间

示例

examples/product-search.tsx - 电商搜索
examples/autocomplete-search.tsx - 自动完成实现
examples/sqlalchemy_search.py - SQLAlchemy模式
examples/fastapi_search.py - FastAPI搜索端点
examples/django_filter_backend.py - Django过滤器

资产

assets/filter-config-schema.json - 过滤配置
assets/search-api-spec.json - OpenAPI规范

名称: 实现搜索过滤 描述: 为前端（React/TypeScript）和后端（Python）实现搜索和过滤接口，包括防抖、查询管理和数据库集成。适用于添加搜索功能、构建过滤UI、实现分面搜索或优化搜索性能时使用。