“”

由于项目中有急需用到搜索推荐+自动填充的功能, 但是github上找的jquery-autocomplete又不能完全满足需求, 并且由于jquery插件编写方式的格式, 修改起来不是很方便, 还不如自己实现一个, 故开始自己造轮子

autocomplete 功能实现分析

一般说来, 一个组件内抽象着很多具体的实现, 想要全面控制这些实现, 需要先分析, 然后将具体实现分离关注.

确定实现功能所需的所有界面(按逻辑划分)

1. 一个单行文本框search-input

2. 一个填充搜索推荐层search-menu

   1. 头部区域块search-menu-header

   2. 内容区域块search-menu-content

      1. 推荐搜索项区域块search-menu-item

         1. 推荐搜索文字区域块item-text

         2. 推荐搜索附加信息区域块, 例如: 商品数量显示item-count或者历史提交搜索记录删除按钮search-menu-history-delete

   3. 尾部区域块search-menu-footer

      1. 关闭按钮search-menu-close

确定实现功能所需的所有逻辑(按人机交互事件划分)

1. 一个单行文本框search-input

   1. input事件

      1. 主要控制输入的关键字与推荐关键词数据的匹配获取,

      2. search-menu的控制隐显, 模板重新生成

      3. 记忆已进行匹配操作的关键词, 以及匹配的推荐关键词数据

   2. click事件

      1. search-menu的控制隐显, 模板重新生成

   3. foucsin 事件

      1. 记忆search-input当前的focus状态, 键盘事件要用

   4. focusout 事件

      1. 记忆search-input当前的focus状态, 键盘事件要用

      2. search-menu的控制隐显

   5. keydown 事件

      1. ESC: 27

         1. search-menu的控制隐显

      2. RETURN: 13

         1. 记忆历史搜索提交项

         2. 提交搜索(比如提交数据至远程服务器进行关键词匹配的商品搜索)

      3. LEFT: 37

      4. UP: 38

         1. search-menu的控制隐显

         2. 记忆search-menu-item选中第几项

         3. 处理操作后search-menu-item的UI变化

         4. 处理操作后search-input的value变化

      5. RIGHT: 39

      6. DOWN: 40

         1. search-menu的控制隐显

         2. 记忆search-menu-item选中第几项

         3. 处理操作后search-menu-item的UI变化

         4. 处理操作后search-input的value变化

2. 一个填充搜索推荐层search-menu

   1. mouseenter事件 (针对searchItem冒泡)

      1. 记忆search-menu-item选中第几项

      2. 处理操作后search-menu-item的UI变化

   2. mouseleave事件

      1. 记忆search-menu-item选中第几项

      2. 处理操作后search-menu-item的UI变化

   3. click事件 (针对searchItem冒泡)

      1. 记忆search-menu-item选中第几项

      2. 处理操作后search-menu-item的UI变化

      3. search-menu的控制隐显

      4. 提交搜索(比如提交数据至远程服务器进行关键词匹配的商品搜索)

3. 关闭按钮search-menu-close

   1. click事件

      1. search-menu的控制隐显

4. 历史提交搜索记录删除按钮search-menu-history-delete

   1. ‘click’事件

      1. 删除该项历史提交搜索记录

      2. 处理操作后search-menu-item的UI变化

      3. 将焦点返回search-input

确定数据存储

1. search-menu的赋值数据源searchMenuData(Object) 默认为空对象

   [key] id 默认未定义

   [key] isShowHeader 默认false

   [key] isShowFooter 默认true

   [key] recommendKeywordDataList

2. search-menu-content的赋值数据源recommendKeywordDataList(Array<Object>) 默认未定义

   其中Object部分

   [key] keyword 可以自定义指定这个key

3. 历史已提交搜索关键词缓存historySearchedKeywordCacheList(Array<String>) 默认为空数组

4. 历史未提交推荐搜索关键词缓存historyRecommendKeywordCacheList(Array<String>) 默认为空数组

5. 历史未提交推荐搜索关键词 -> 返回的数据结果集historyRecommendKeywordCache(Object) 默认为空对象

   key -> historyKeyword

   value -> recommendKeywordDataList toJson

确定关键属性

1. 一个单行文本框search-input输入文本值searchInputValue(String) 默认未定义

2. 推荐搜索关键词recommendKeyword(String) 默认未定义

3. 头部区域块是否显示标识isShowHeader(Boolean) 默认false

4. 尾部区域块是否显示标识isShowFooter(Boolean) 默认true

5. [公开]历史已提交搜索关键词缓存最大个数maximumHistorySearchedKeywordCacheList(Int) 默认为100

6. [公开]历史已提交搜索关键词显示个数displayHistorySearchedKeywordCacheListCount(Int)默认为10

7. [公开]历史未提交搜索关键词缓存最大个数maximumHistoryKeywordCacheList(Int) 默认为100

8. [公开]是否使用远程数据remote(Boolean) 默认false (请求方式强制使用jsonp)

9. [公开]远程请求地址url(String) 默认未定义 (当remote为true时必须指定)

10. [公开]对应搜索文本的请求参数名queryName(String) 默认为’searchKey’

11. [公开]附加请求参数对象additionalQueryParams(Object) 默认null (需要支持实例修改)

12. [公开]本地数据源localData(Object) 默认null (当remote为false时必须指定)

    key -> keyword

    value -> recommendKeywordDataList toJson

13. [公开]对每个推荐搜索返回结果集里指定的字段进行格式化, 返回格式化后的值 -> 回调函数formatRecommendKeywordData(Function) 默认为null

14. [公开]允许触发一次获取搜索推荐数据动作最小间隔recommendFetchInterval(Int) 默认为10(ms)

15. fetch数据的请求对象xhr(Object) 默认null 由jQuery.ajax创建

16. 延迟进行fetch数据请求对象defered(Object) 默认null 由setTimeout创建

17. 一个单行文本框search-input当前focus状态focusState(Boolean) 默认false

18. 一个填充搜索推荐层search-menu当前显示状态displayState(Boolean) 默认false

19. 推荐搜索项countrecommendItemsCount(Int) 默认0

20. 当前选择/停留的搜索项indexsearchItemIndex(Int) 默认-1 选择搜索推荐项时使用, 0表示第一项, recommendItemsCount-1表示最后一项

21. [公开]提交搜索事件 -> 回调函数onSearch(Function)

22. [公开]切换推荐搜索项事件 -> 回调函数onSelect(Function) 默认为更新UI方法 应是指定搜索文本框元素searchInput的value值, 以及针对自定义模板选中的searchItem切换选中样式

23. [公开]切换搜索菜单层显示状态事件 -> 回调函数onSearchMenuDisplayStateChange(Function) 默认为更新UI方法 应指定切换推荐搜索层元素searchMenu的隐显

24. [公开]搜索文本框元素searchInput(HTMLElement) (必须指定)

25. 推荐搜索层元素searchMenu(HTMLElemnt) 默认为null, 内部模板解析创建元素后, 自动关联(通过id)

26. [公开]设置完search-menu的赋值数据源事件searchMenuData -> 回调函数*onSetSearchMenuData*(Function) 默认为设置header与footer值方法 使用者可以在这里指定搜索菜单header, footer或其他自定义变量

27. [公开]自定义模板解析生成方法template(Function) 默认为模板方法 该方法应是获取到自定义模板后, 直接传入js对象即可返回html代码

28. [公开]模板生成html后事件 -> 回调函数onTemplate(Function) 默认为更新UI方法 应是获取到模板解析数据后生成的html代码, 然后将推荐搜索层元素searchMenu内容替换(模板需要作控制, 只有第一次才包含容器元素标签)

29. [公开]每个推荐搜索项匹配的选择器searchItemSelector(String) 默认为与默认模板匹配的选择器 可自定义, 但需要同时自定义模板

30. [公开]被选中的那个推荐搜索项匹配的选择器searchItemSelectedSelector(String) 默认为与默认模板匹配的附加选择器 可自定义, 但需要同时自定义css

31. 是否允许search-inputfocusout事件触发allowFocusOut(Boolean) 默认true 为防止点击search-menu执行foucsout事件逻辑

32. [公开]search-menu-content的赋值数据源recommendKeywordDataList中对应显示推荐搜索词的字段名suggestKeyword(String) 默认为’keyword’

33. [公开]请求远程数据, 返回结果对应dataList数组的keyresultListKey(String) 默认为’list’

34. [公开]推荐搜索层search-menu的关闭按钮匹配的选择器searchMenuCloseSelector(String) 默认为’.search-menu-close’ 可自定义, 但需要同时自定义模板

35. [公开]推荐搜索层search-menu的内容部分匹配的选择器searchMenuContentSelector(String) 默认为’.search-menu-content’ 可自定义, 但需要同时自定义模板

36. [公开]远程请求超时时间timeout(Int) 默认为3000(30s)

37. [公开]远程请求返回数据方式dataType(String) 默认为’json’ 也支持’jsonp’

38. [公开]search-menu-content的赋值数据源recommendKeywordDataList中对应显示推荐搜索词的字段的html内容suggestKeywordHtml(String) 默认为’suggestKeywordHtml’ 可自定义, 但需要同时自定义模板

39. [公开]推荐搜索层search-menu的历史已提交搜索记录的删除按钮匹配的选择器searchMenuHistoryDeleteSelector(String) 默认为’.search-menu-history-delete’ 可自定义, 但需要同时自定义模板

查看在线示例

源代码

• 上一篇
  请使用Markdown写文档
• 下一篇
  你可能并不需要使用jQuery了