本文为对大项目的简单总结，我在其中担任了UI设计的角色，并承担了依赖搜索界面的需求实现，此篇笔记为下篇，主要聚焦于搜索与上传，以及历史记录功能的实现。
搜索功能：
搜索功能主要依托于react-autosuggest库以及RESTful API的实现
首先我通过调用API向npm.io网站请求指定包名的信息，其中需要的是name, version和description三个字段，而这些信息会出现在搜索栏中，我们只需要头部名称适配的结果，并从其中提取其中10个，如果请求未找到（404）则报错并返回空数组。
在获取包名后，我将利用react-autosuggest内置的API逐步实现搜索栏功能，其中最重要的是如下的inputProps变量，这个变量记录了搜索栏中属性以及用户操作导致的状态变化，如value, onChange, onBlur, keyDown等，分别对应了输入字符，上下键，enter/esc等操作会触发的行为。而如果这些操作涉及到对server发送请求，则需要通过判断获取的包名情况进行错误处理。
上传功能：
上传是用了react-dropzone库，其中提供了useDropzone hook，可以通过设置参数控制可上传文件类型，以及json解析操作等，此处相对简单，唯一的问题是由于高度封装，在写CSS时会遇到一些困难。
历史记录功能：
历史记录相对简单，只需要在React Context中储存一个全局状态，在搜索时记录搜索字符串于缓存中便于之后调用即可。有两点需要注意，其一，只能储存有效包名，在无效或未发送请求时不能记录，而当重复搜索时应该更新包名顺序，其二，需要使用localStorage，以免多次打开搜索页面时记录丢失。
总结：
搜索界面拥有很多使用场景，但其中也有很多细节需要注意，在开发的过程中可以多参考现有搜索引擎如Google的交互细节并加以学习，也需要进行细致的调试，唯一的遗憾是这部分与主体功能分离比较彻底，写下来收获也较为局限。
