[关闭]
@EncyKe 2017-03-02T07:07:16.000000Z 字数 3418 阅读 792

手记:搜索页面的一般实现思路

#手记


1. 实现思路

  1. 确定 query string 参数名称(如:?q=);
  2. 全局搜索组件在获取用户输入内容并回车后,编码,接入搜索页链接参数并直接跳转(如:https://www.google.com/?q=%E5%85%B3%E9%94%AE%E8%AF%8D);
  3. 搜索页初始化时获取 ?q= 参数的内容,转译,调取接口获取返回数据,渲染页面结果;
    • 搜索页注意兼容参数为空、以及没有参数的情况;
    • 搜索页输入框监听用户输入,实时根据用户输入字符重新渲染页面结果;
  4. 搜索输入框可把每次用户搜索的关键词存入 localStorage,而后当输入框获得焦点时下拉显示历史搜索列表;
  5. 可用 URL 操作库:URI.js

2. 全局的搜索组件

  1. /**
  2. * @description 绑定搜索跳转功能到全局搜索组件
  3. * 1. 点击搜索按钮跳转到关键词搜索页面
  4. * 2. 输入框回车跳转到关键词搜索页面
  5. * 3. 输入框获得焦点时下拉显示历史搜索列表
  6. * @param {Object} $searchComponent - 全局搜索组件,jQuery 对象
  7. */
  8. function bindSearchComponentEvents($searchComponent) {
  9. var $searchInput = $searchComponent.find('.js-search-input');
  10. $searchComponent.on('click', '.js-search-btn', function (ev) {
  11. var keyword = $searchInput.val();
  12. if ($.trim(keyword) !== '') {
  13. _jumpToSearchPage(keyword);
  14. }
  15. });
  16. $searchComponent.on('keyup', '.js-search-input', function (ev) {
  17. ev.preventDefault();
  18. var keyword = $searchInput.val();
  19. if (ev.which === 13 && $searchInput.is(':focus') && $.trim(keyword) !== '') {
  20. _jumpToSearchPage(keyword);
  21. }
  22. });
  23. $searchComponent.on('focus', '.js-search-input', function (ev) {
  24. _renderHistorySearchDropdown();
  25. });
  26. };
  27. /**
  28. * @description 拼接搜索链接(假定 searchURL 为搜索页的地址)
  29. * @param {String} keyword - 搜索关键词
  30. */
  31. function _jumpToSearchPage(keyword) {
  32. var searchURL = 'https://www.google.com/';
  33. var url = searchURL + '?q=' + encodeURIComponent(keyword);
  34. // 或者使用 URI.js——
  35. // var url = URI(searchURL).addSearch('q', keyword);
  36. window.open(url);
  37. };

3. 搜索页面

3.1. 搜索页面获取 query string 渲染搜索结果

  1. function init($searchPage) {
  2. $searchInput = $searchPage.find('.js-search-input');
  3. var query = new URI(location.href).search(true);
  4. var keyword = query.q;
  5. if (typeof keyword === 'string' && keyword !== '') {
  6. keyword = decodeURIComponent(keyword);
  7. $searchInput.val(keyword);
  8. _search(keyword);
  9. } else {
  10. _handleEmptyRes();
  11. };
  12. };
  13. /**
  14. * @description 搜索关键词并加载结果
  15. * @param {String} keyword - 需要搜索的关键词
  16. */
  17. function _search(keyword) {
  18. // 1. 用 API 处理关键词搜索;
  19. // 2. 渲染结果页面;
  20. };
  21. /**
  22. * @description 渲染空白页面
  23. */
  24. function _handleEmptyRes() {
  25. // 可以提示「你可能会对一下内容感兴趣——」,然后渲染一批待搜索 item 等等;
  26. };

3.2. 搜索页面的输入控件

  1. /**
  2. * @description 绑定搜索渲染功能到输入控件
  3. * 1. 点击搜索按钮加载搜索结果
  4. * 2. 根据输入关键词实时渲染搜索结果
  5. * 3. 输入框获得焦点时下拉显示历史搜索列表
  6. * 4. 点击加载更多按钮加载更多
  7. * @param {Object} $searchPage - 页面 jQuery 对象
  8. */
  9. function bindSearchEvents($searchPage) {
  10. $searchInput = $searchPage.find('.js-search-input');
  11. $searchPage.on('click', '.js-search-btn', function (ev) {
  12. var keyword = $searchInput.val();
  13. if ($.trim(keyword) !== '') {
  14. _search(keyword);
  15. }
  16. });
  17. $searchPage.on('keyup', '.js-search-input', function (ev) {
  18. ev.preventDefault();
  19. var keyword = $searchInput.val();
  20. if ($searchInput.is(':focus') && $.trim(keyword) !== '') {
  21. _search(keyword);
  22. }
  23. });
  24. $searchPage.on('focus', '.js-search-input', function (ev) {
  25. _renderHistorySearchDropdown();
  26. });
  27. $searchPage.on('click', '.js-load-more', function (ev) {
  28. var keyword = $searchInput.val();
  29. if ($.trim(keyword) !== '') {
  30. _.search(keyword, paramThatLoadNextPage);
  31. }
  32. });
  33. };

4. 存储及获取历史搜索

  1. /**
  2. * @description 存储历史搜索
  3. * @param {String} keyword - 需要存入历史搜索的关键词
  4. */
  5. function _saveSearchItem(keyword) {
  6. var searchItems = _getHistorySearchItems();
  7. searchItems.push(keyword);
  8. localStorage.searchItemsStr = JSON.stringify(searchItems);
  9. };
  10. /**
  11. * @description 获取历史搜索
  12. * @return {Array} historySearchItems - 历史搜索数据
  13. */
  14. function _getHistorySearchItems() {
  15. var historySearchItemsStr = localStorage.searchItemsStr;
  16. var historySearchItems = historySearchItemsStr ? JSON.parse(historySearchItemsStr) : [];
  17. return historySearchItems;
  18. };
  19. /**
  20. * @description 渲染历史搜索列表
  21. */
  22. function _renderHistorySearchDropdown() {
  23. var historySearchItems = _getHistorySearchItems();
  24. if (historySearchItems.length !== 0) {
  25. historySearchItems.map(function (val){
  26. var keyword = encodeURIComponent(val);
  27. $('.js-dropdown').slideDown().append('<li><a href="https://www.google.com/?q=' + keyword + '">' + val + '</a></li>');
  28. });
  29. }
  30. };
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注