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

#手记

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. 全局的搜索组件

/**
 * @description 绑定搜索跳转功能到全局搜索组件
 * 1. 点击搜索按钮跳转到关键词搜索页面
 * 2. 输入框回车跳转到关键词搜索页面
 * 3. 输入框获得焦点时下拉显示历史搜索列表
 * @param {Object} $searchComponent  - 全局搜索组件，jQuery 对象
 */
function bindSearchComponentEvents($searchComponent) {
  var $searchInput = $searchComponent.find('.js-search-input');
  $searchComponent.on('click', '.js-search-btn', function (ev) {
    var keyword = $searchInput.val();
    if ($.trim(keyword) !== '') {
      _jumpToSearchPage(keyword);
    }
  });
  $searchComponent.on('keyup', '.js-search-input', function (ev) {
    ev.preventDefault();
    var keyword = $searchInput.val();
    if (ev.which === 13 && $searchInput.is(':focus') && $.trim(keyword) !== '') {
      _jumpToSearchPage(keyword);
    }
  });
  $searchComponent.on('focus', '.js-search-input', function (ev) {
    _renderHistorySearchDropdown();
  });
};
/**
 * @description 拼接搜索链接（假定 searchURL 为搜索页的地址）
 * @param {String} keyword  - 搜索关键词
 */
function _jumpToSearchPage(keyword) {
  var searchURL = 'https://www.google.com/';
  var url = searchURL + '?q=' + encodeURIComponent(keyword);
  // 或者使用 URI.js——
  // var url = URI(searchURL).addSearch('q', keyword);
  window.open(url);
};

3. 搜索页面

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

function init($searchPage) {
  $searchInput = $searchPage.find('.js-search-input');
  var query = new URI(location.href).search(true);
  var keyword = query.q;
  if (typeof keyword === 'string' && keyword !== '') {
    keyword = decodeURIComponent(keyword);
    $searchInput.val(keyword);
    _search(keyword);
  } else {
    _handleEmptyRes();
  };
};
/**
 * @description 搜索关键词并加载结果
 * @param  {String} keyword  - 需要搜索的关键词
 */
function _search(keyword) {
  // 1. 用 API 处理关键词搜索；
  // 2. 渲染结果页面；
};
/**
 * @description 渲染空白页面
 */
function _handleEmptyRes() {
  // 可以提示「你可能会对一下内容感兴趣——」，然后渲染一批待搜索 item 等等；
};

3.2. 搜索页面的输入控件

/**
 * @description 绑定搜索渲染功能到输入控件
 * 1. 点击搜索按钮加载搜索结果
 * 2. 根据输入关键词实时渲染搜索结果
 * 3. 输入框获得焦点时下拉显示历史搜索列表
 * 4. 点击加载更多按钮加载更多
 * @param {Object} $searchPage  - 页面 jQuery 对象
 */
function bindSearchEvents($searchPage) {
  $searchInput = $searchPage.find('.js-search-input');
  $searchPage.on('click', '.js-search-btn', function (ev) {
    var keyword = $searchInput.val();
    if ($.trim(keyword) !== '') {
      _search(keyword);
    }
  });
  $searchPage.on('keyup', '.js-search-input', function (ev) {
    ev.preventDefault();
    var keyword = $searchInput.val();
    if ($searchInput.is(':focus') && $.trim(keyword) !== '') {
      _search(keyword);
    }
  });
  $searchPage.on('focus', '.js-search-input', function (ev) {
    _renderHistorySearchDropdown();
  });
  $searchPage.on('click', '.js-load-more', function (ev) {
    var keyword = $searchInput.val();
    if ($.trim(keyword) !== '') {
      _.search(keyword, paramThatLoadNextPage);
    }
  });
};

4. 存储及获取历史搜索

/**
 * @description 存储历史搜索
 * @param {String} keyword  - 需要存入历史搜索的关键词
 */
function _saveSearchItem(keyword) {
  var searchItems = _getHistorySearchItems();
  searchItems.push(keyword);
  localStorage.searchItemsStr = JSON.stringify(searchItems);
};
/**
 * @description 获取历史搜索
 * @return {Array} historySearchItems  - 历史搜索数据
 */
function _getHistorySearchItems() {
  var historySearchItemsStr = localStorage.searchItemsStr;
  var historySearchItems = historySearchItemsStr ? JSON.parse(historySearchItemsStr) : [];
  return historySearchItems;
};
/**
 * @description 渲染历史搜索列表
 */
function _renderHistorySearchDropdown() {
  var historySearchItems = _getHistorySearchItems();
  if (historySearchItems.length !== 0) {
    historySearchItems.map(function (val){
      var keyword = encodeURIComponent(val);
      $('.js-dropdown').slideDown().append('<li><a href="https://www.google.com/?q=' + keyword + '">' + val + '</a></li>');
    });
  }
};