@EncyKe
2017-03-02T07:07:16.000000Z
字数 3418
阅读 1150
#手记
?q=
);?q=
参数的内容,转译,调取接口获取返回数据,渲染页面结果;
/**
* @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);
};
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 等等;
};
/**
* @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);
}
});
};
/**
* @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>');
});
}
};