mirror of
https://github.com/TopVitamin/static-nav.git
synced 2026-03-21 01:02:45 +08:00
增加键盘上下移动选择候选词
This commit is contained in:
vitamin
@@ -1,296 +1,299 @@
|
||||
/* ================ reset 样式 start ================ */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "微软雅黑";
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: none
|
||||
}
|
||||
html, body {
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
input[type="button"], input[type="submit"], input[type="reset"] {
|
||||
-webkit-appearance: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/* ================ reset 样式 end ================ */
|
||||
|
||||
|
||||
.inner-center {
|
||||
width: 1000px;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
|
||||
.main {
|
||||
padding-top: 5%;
|
||||
min-height: 100%;
|
||||
|
||||
}
|
||||
.content-inside{
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
.footer {
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
margin-top: -60px;
|
||||
/* position: relative;
|
||||
margin-top: -100px;
|
||||
clear:both; */
|
||||
}
|
||||
/* logo start */
|
||||
.logo-box {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
margin-left: 250px;
|
||||
align-items: center;
|
||||
}
|
||||
.logo-left {
|
||||
position: relative;
|
||||
width: 125px;
|
||||
height: 121px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.logo-right {
|
||||
padding-left: 36px;
|
||||
font-size: 36px;
|
||||
color: rgba(0, 39, 102, 1);
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
/* logo end */
|
||||
|
||||
|
||||
/* 搜索框 start */
|
||||
.search-section {
|
||||
margin-top: 14px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.search-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
.search-left {
|
||||
display: flex;
|
||||
width: 877px;
|
||||
height: 54px;
|
||||
line-height: 20px;
|
||||
border: 1px solid rgba(217, 217, 217, 0.96);
|
||||
}
|
||||
.search-logo {
|
||||
width: 40px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: url("./img/scgoogle.png") center center no-repeat;
|
||||
filter: grayscale(100%);
|
||||
-webkit-filter: grayscale(100%);
|
||||
-moz-filter: grayscale(100%);
|
||||
-o-filter: grayscale(100%);
|
||||
filter: alpha(opacity=20);
|
||||
-moz-opacity: 0.2;
|
||||
-khtml-opacity: 0.2;
|
||||
opacity: 0.2;
|
||||
cursor: pointer;
|
||||
}
|
||||
.search-logo:hover {
|
||||
filter: grayscale(0%);
|
||||
-webkit-filter: grayscale(0%);
|
||||
-moz-filter: grayscale(0%);
|
||||
-o-filter: grayscale(0%);
|
||||
filter: alpha(opacity=100);
|
||||
-moz-opacity: 1;
|
||||
-khtml-opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
.search-methods {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 54px;
|
||||
width: 155px;
|
||||
border: 1px solid rgba(217, 217, 217, 0.96);
|
||||
background-color: #fff;
|
||||
}
|
||||
.search-methods li {
|
||||
padding-left: 39px;
|
||||
background: url("./img/scgoogle.png") 10px no-repeat;
|
||||
overflow: hidden;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
color: #545454;
|
||||
cursor: pointer;
|
||||
}
|
||||
.search-logo.baidu, li.baidu {
|
||||
background-image: url("./img/scbaidu.png");
|
||||
}
|
||||
.search-logo.bing, li.bing {
|
||||
background-image: url("./img/scbing.png");
|
||||
}
|
||||
.search-logo.sogou, li.sogou {
|
||||
background-image: url("./img/scsogou.png");
|
||||
}
|
||||
.search-logo.wangpan, li.wangpan {
|
||||
background-image: url("./img/scwangpan.png");
|
||||
}
|
||||
.search-logo.so, li.so {
|
||||
background-image: url("./img/scso.png");
|
||||
}
|
||||
.search-logo.google, li.google {
|
||||
background-image: url("./img/scgoogle.png");
|
||||
}
|
||||
|
||||
.search-methods .search-item:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.search-result {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 837px;
|
||||
top: 55px;
|
||||
left: 40px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
background-color: #fff;
|
||||
}
|
||||
.result-item {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.result-item:hover {
|
||||
background-color: #eee;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
.input-wrap .search-input {
|
||||
height: 52px;
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
font-size: 16px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
/* .input-wrap .search-input:focus{
|
||||
border-style:solid;
|
||||
border-color: #FDA31E 96%;
|
||||
box-shadow: 0 0 10px #FDA31E;
|
||||
} */
|
||||
/* .search-left:focus{
|
||||
border-style:solid;
|
||||
border-color: #FDA31E 96%;
|
||||
box-shadow: 0 0 10px #FDA31E;
|
||||
} */
|
||||
.input-wrap .clear-keyword {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
color: #d2d2d2;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.search-submit {
|
||||
width: 123px;
|
||||
height: 54px;
|
||||
line-height: 26px;
|
||||
background: url("./img/search.png") #1890ff 48px center no-repeat;
|
||||
-webkit-background-size: 35px 35px;
|
||||
background-size: 35px 35px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
font-family: Roboto;
|
||||
border: 1px solid #1890ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 搜索框 end */
|
||||
/* 导航内容 start */
|
||||
.nav-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 导航内容 end */
|
||||
|
||||
|
||||
/*内容区域*/
|
||||
|
||||
/*-----------------------------简洁版样式定义- 开始---------------------------------------------------*/
|
||||
|
||||
.jj-list {
|
||||
width: 33.33%;
|
||||
float: left;
|
||||
margin-bottom: 30px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
.jj-list:nth-of-type(3n) {
|
||||
padding-right: 0;
|
||||
}
|
||||
.jj-list-tit {
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
color: rgba(49, 70, 89, 1);
|
||||
font-weight: bold;
|
||||
}
|
||||
.jj-list-con {
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
.jj-list-con li {
|
||||
box-sizing: border-box; /*以IE盒子模型的width为标准*/
|
||||
padding: 1px 1px; /*设置div的内边距*/
|
||||
width: 33.33%; /*div等分成4部分*/
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
.jj-list-link {
|
||||
display: block;
|
||||
background: rgba(230, 247, 255, 0.96);
|
||||
color:rgba(49, 70, 89, 1);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
transition: all 0.2s;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.jj-list-link:hover {
|
||||
background: #1890FF 100%;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/*-----------------------------简洁版样式定义- 结束---------------------------------------------------*/
|
||||
|
||||
|
||||
/* ================ reset 样式 start ================ */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "微软雅黑";
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: none
|
||||
}
|
||||
html, body {
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
input[type="button"], input[type="submit"], input[type="reset"] {
|
||||
-webkit-appearance: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/* ================ reset 样式 end ================ */
|
||||
|
||||
|
||||
.inner-center {
|
||||
width: 1000px;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
|
||||
.main {
|
||||
padding-top: 5%;
|
||||
min-height: 100%;
|
||||
|
||||
}
|
||||
.content-inside{
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
.footer {
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
margin-top: -60px;
|
||||
/* position: relative;
|
||||
margin-top: -100px;
|
||||
clear:both; */
|
||||
}
|
||||
/* logo start */
|
||||
.logo-box {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
margin-left: 250px;
|
||||
align-items: center;
|
||||
}
|
||||
.logo-left {
|
||||
position: relative;
|
||||
width: 125px;
|
||||
height: 121px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.logo-right {
|
||||
padding-left: 36px;
|
||||
font-size: 36px;
|
||||
color: rgba(0, 39, 102, 1);
|
||||
font-family: SourceHanSansSC-regular;
|
||||
}
|
||||
/* logo end */
|
||||
|
||||
|
||||
/* 搜索框 start */
|
||||
.search-section {
|
||||
margin-top: 14px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.search-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
.search-left {
|
||||
display: flex;
|
||||
width: 877px;
|
||||
height: 54px;
|
||||
line-height: 20px;
|
||||
border: 1px solid rgba(217, 217, 217, 0.96);
|
||||
}
|
||||
.search-logo {
|
||||
width: 40px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: url("./img/scgoogle.png") center center no-repeat;
|
||||
filter: grayscale(100%);
|
||||
-webkit-filter: grayscale(100%);
|
||||
-moz-filter: grayscale(100%);
|
||||
-o-filter: grayscale(100%);
|
||||
filter: alpha(opacity=20);
|
||||
-moz-opacity: 0.2;
|
||||
-khtml-opacity: 0.2;
|
||||
opacity: 0.2;
|
||||
cursor: pointer;
|
||||
}
|
||||
.search-logo:hover {
|
||||
filter: grayscale(0%);
|
||||
-webkit-filter: grayscale(0%);
|
||||
-moz-filter: grayscale(0%);
|
||||
-o-filter: grayscale(0%);
|
||||
filter: alpha(opacity=100);
|
||||
-moz-opacity: 1;
|
||||
-khtml-opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
.search-methods {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 54px;
|
||||
width: 155px;
|
||||
border: 1px solid rgba(217, 217, 217, 0.96);
|
||||
background-color: #fff;
|
||||
}
|
||||
.search-methods li {
|
||||
padding-left: 39px;
|
||||
background: url("./img/scgoogle.png") 10px no-repeat;
|
||||
overflow: hidden;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
color: #545454;
|
||||
cursor: pointer;
|
||||
}
|
||||
.search-logo.baidu, li.baidu {
|
||||
background-image: url("./img/scbaidu.png");
|
||||
}
|
||||
.search-logo.bing, li.bing {
|
||||
background-image: url("./img/scbing.png");
|
||||
}
|
||||
.search-logo.sogou, li.sogou {
|
||||
background-image: url("./img/scsogou.png");
|
||||
}
|
||||
.search-logo.wangpan, li.wangpan {
|
||||
background-image: url("./img/scwangpan.png");
|
||||
}
|
||||
.search-logo.so, li.so {
|
||||
background-image: url("./img/scso.png");
|
||||
}
|
||||
.search-logo.google, li.google {
|
||||
background-image: url("./img/scgoogle.png");
|
||||
}
|
||||
|
||||
.search-methods .search-item:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.search-result {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 837px;
|
||||
top: 55px;
|
||||
left: 40px;
|
||||
border: 1px solid rgba(187, 187, 187, 1);
|
||||
background-color: #fff;
|
||||
}
|
||||
.result-item {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.result-item.active {
|
||||
background: #F0F0F0;
|
||||
}
|
||||
.result-item:hover {
|
||||
background-color: #eee;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
.input-wrap .search-input {
|
||||
height: 52px;
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
font-size: 16px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
/* .input-wrap .search-input:focus{
|
||||
border-style:solid;
|
||||
border-color: #FDA31E 96%;
|
||||
box-shadow: 0 0 10px #FDA31E;
|
||||
} */
|
||||
/* .search-left:focus{
|
||||
border-style:solid;
|
||||
border-color: #FDA31E 96%;
|
||||
box-shadow: 0 0 10px #FDA31E;
|
||||
} */
|
||||
.input-wrap .clear-keyword {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
color: #d2d2d2;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.search-submit {
|
||||
width: 123px;
|
||||
height: 54px;
|
||||
line-height: 26px;
|
||||
background: url("./img/search.png") #1890ff 48px center no-repeat;
|
||||
-webkit-background-size: 35px 35px;
|
||||
background-size: 35px 35px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
font-family: Roboto;
|
||||
border: 1px solid #1890ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 搜索框 end */
|
||||
/* 导航内容 start */
|
||||
.nav-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 导航内容 end */
|
||||
|
||||
|
||||
/*内容区域*/
|
||||
|
||||
/*-----------------------------简洁版样式定义- 开始---------------------------------------------------*/
|
||||
|
||||
.jj-list {
|
||||
width: 33.33%;
|
||||
float: left;
|
||||
margin-bottom: 30px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
.jj-list:nth-of-type(3n) {
|
||||
padding-right: 0;
|
||||
}
|
||||
.jj-list-tit {
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
color: rgba(49, 70, 89, 1);
|
||||
font-weight: bold;
|
||||
}
|
||||
.jj-list-con {
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
.jj-list-con li {
|
||||
box-sizing: border-box; /*以IE盒子模型的width为标准*/
|
||||
padding: 1px 1px; /*设置div的内边距*/
|
||||
width: 33.33%; /*div等分成4部分*/
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
.jj-list-link {
|
||||
display: block;
|
||||
background: rgba(230, 247, 255, 0.96);
|
||||
color:rgba(49, 70, 89, 1);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
transition: all 0.2s;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.jj-list-link:hover {
|
||||
background: #1890FF 100%;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/*-----------------------------简洁版样式定义- 结束---------------------------------------------------*/
|
||||
|
||||
|
||||
|
||||
@@ -1,216 +1,262 @@
|
||||
$(function () {
|
||||
|
||||
// 默认搜索引擎记录
|
||||
var searchTypeStore = {
|
||||
set: function (type) {
|
||||
localStorage.setItem('SearchType', type);
|
||||
},
|
||||
get: function () {
|
||||
return localStorage.getItem('SearchType');
|
||||
},
|
||||
};
|
||||
|
||||
var $searchMethods = $('#search_methods');
|
||||
var $searchLogo = $('#search_logo');
|
||||
var initSearchType = searchTypeStore.get();
|
||||
$searchLogo.addClass(initSearchType).data('type', initSearchType);
|
||||
|
||||
var search_types = [
|
||||
{ url: 'https://www.baidu.com/s?wd=', type: 'baidu' },
|
||||
{ url: 'https://www.sogou.com/web?query=', type: 'sogou' },
|
||||
{ url: 'https://cn.bing.com/search?q=', type: 'bing' },
|
||||
{ url: 'https://www.so.com/s?q=', type: 'so' },
|
||||
{ url: 'https://www.google.com/search?q=', type: 'google' },
|
||||
{ url: 'http://www.cilimao.cc/search?word=', type: 'cili' },
|
||||
{ url: 'http://neets.cc/search?key=', type: 'yingyin' },
|
||||
{ url: 'http://www.panduoduo.net/s/name/', type: 'wangpan' },
|
||||
];
|
||||
$searchLogo.on('click', function () {
|
||||
$searchMethods.show();
|
||||
});
|
||||
|
||||
// 搜索引擎切换
|
||||
$searchMethods.on('click', 'li', function () {
|
||||
var type = $(this).data('type');
|
||||
searchTypeStore.set(type);
|
||||
$searchLogo.removeClass()
|
||||
.data('type', type)
|
||||
.addClass(type + ' search-logo');
|
||||
$searchMethods.hide();
|
||||
$('#search_keyword').focus();
|
||||
});
|
||||
$searchMethods.on('mouseleave', function () {
|
||||
$searchMethods.hide();
|
||||
});
|
||||
|
||||
var EVENT_CLEAR_KEYWORD = 'clearKeyword';
|
||||
var EVENT_SEARCH = 'search';
|
||||
// 关键词搜索输入
|
||||
$('#search_keyword').on('keyup', function (event) {
|
||||
var $keyword = $(this);
|
||||
var keyword = $keyword.val();
|
||||
if(event.which==13){
|
||||
openSearch(keyword)
|
||||
return;
|
||||
}
|
||||
// TODO 上下键选择待选答案
|
||||
keywordChange(keyword);
|
||||
}).on('blur', function () {
|
||||
// $('#search_result').hide();
|
||||
}).on('focus', function () {
|
||||
var keyword = $(this).val();
|
||||
keywordChange(keyword);
|
||||
});
|
||||
|
||||
function keywordChange(keyword) {
|
||||
if (keyword === '') {
|
||||
$(document).trigger(EVENT_CLEAR_KEYWORD);
|
||||
} else {
|
||||
$(document).trigger(EVENT_SEARCH, keyword);
|
||||
$('#clear_keyword').show();
|
||||
}
|
||||
}
|
||||
|
||||
// 清空输入框
|
||||
$('#clear_keyword').on('click', function () {
|
||||
$('#search_keyword').val('');
|
||||
$('#search_keyword').focus();
|
||||
$(document).trigger(EVENT_CLEAR_KEYWORD);
|
||||
});
|
||||
|
||||
// 点击高亮显示
|
||||
$('#search_keyword').on('focus', function () {
|
||||
$('.search-left').css(
|
||||
{
|
||||
"border-style":"solid",
|
||||
"border-color": "rgba(24, 144, 255, 1)",
|
||||
"box-shadow": "0px 0px 2px 1px rgba(145, 213, 255, 0.96)",
|
||||
}
|
||||
);
|
||||
}).on('blur', function () {
|
||||
$('.search-left').prop('style','');
|
||||
});
|
||||
// 搜索
|
||||
$('#search_submit').on('click', function () {
|
||||
var keyword = $('#search_keyword').val();
|
||||
var type = getSeachType();
|
||||
var baseUrl = search_types.find(function (item) {
|
||||
return item.type === type;
|
||||
});
|
||||
if (baseUrl && keyword) {
|
||||
window.open(baseUrl.url + keyword);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 推荐结果跳转
|
||||
$('#search_result').on('click', 'li', function () {
|
||||
var word = $(this).text();
|
||||
$('#search_keyword').val(word);
|
||||
openSearch(word);
|
||||
$('#search_result').hide();
|
||||
});
|
||||
|
||||
$(document).on(EVENT_CLEAR_KEYWORD, function () {
|
||||
$('#clear_keyword').hide();
|
||||
$('#search_result').hide();
|
||||
});
|
||||
$(document).on(EVENT_SEARCH, function (e, keyword) {
|
||||
getSearchResult(keyword);
|
||||
});
|
||||
|
||||
// 获取搜索引擎类型
|
||||
function getSeachType() {
|
||||
return $('#search_logo').data('type');
|
||||
}
|
||||
|
||||
// google 搜索结果
|
||||
function searchResultGoogle(data) {
|
||||
var result = data[1];
|
||||
result = result.map(function (item) {
|
||||
return item[0];
|
||||
});
|
||||
renderSearchResult(result);
|
||||
}
|
||||
|
||||
// 百度 搜索结果
|
||||
function searchResultBaidu(data) {
|
||||
if (data === undefined) {
|
||||
return;
|
||||
}
|
||||
var result = data.s;
|
||||
renderSearchResult(result);
|
||||
}
|
||||
|
||||
// 渲染搜索结果
|
||||
function renderSearchResult(array) {
|
||||
var $result = $('#search_result');
|
||||
$result.empty().hide();
|
||||
if (!array || array.length <= 0) {
|
||||
return;
|
||||
}
|
||||
for (var i = 0; i < array.length; i++) {
|
||||
var $li = $('<li class=\'result-item\'></li>');
|
||||
$li.text(array[i]);
|
||||
$result.append($li);
|
||||
}
|
||||
$result.show();
|
||||
}
|
||||
|
||||
window.searchResultGoogle = searchResultGoogle;
|
||||
window.searchResultBaidu = searchResultBaidu;
|
||||
|
||||
var search_suggest = {
|
||||
baidu: {
|
||||
url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
|
||||
data: function (keyword) {
|
||||
return {
|
||||
wd: keyword,
|
||||
cb: 'window.searchResultBaidu',
|
||||
};
|
||||
},
|
||||
},
|
||||
google: {
|
||||
url: 'http://suggestqueries.google.com/complete/search',
|
||||
data: function (keyword) {
|
||||
return {
|
||||
q: keyword,
|
||||
jsonp: 'window.searchResultGoogle',
|
||||
client: 'youtube',
|
||||
};
|
||||
},
|
||||
},
|
||||
wangpan: {
|
||||
url: 'http://unionsug.baidu.com/su',
|
||||
data: function (keyword) {
|
||||
return {
|
||||
wd: keyword,
|
||||
cb: 'window.searchResultBaidu',
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
function getSearchResult(keyword) {
|
||||
var searchType = getSeachType();
|
||||
var suggest = search_suggest[searchType];
|
||||
if (!suggest) {
|
||||
suggest = search_suggest.baidu;
|
||||
}
|
||||
$.ajax({
|
||||
url: suggest.url,
|
||||
dataType: 'jsonp',
|
||||
data: suggest.data(keyword),
|
||||
});
|
||||
}
|
||||
|
||||
function openSearch(keyword) {
|
||||
var type = getSeachType();
|
||||
var baseUrl = search_types.find(function (item) {
|
||||
return item.type === type;
|
||||
});
|
||||
if (baseUrl && keyword) {
|
||||
window.open(baseUrl.url + keyword);
|
||||
}
|
||||
}
|
||||
$(function () {
|
||||
|
||||
// 默认搜索引擎记录
|
||||
var searchTypeStore = {
|
||||
set: function (type) {
|
||||
localStorage.setItem('SearchType', type);
|
||||
},
|
||||
get: function () {
|
||||
return localStorage.getItem('SearchType') || 'baidu';
|
||||
},
|
||||
};
|
||||
|
||||
var $searchMethods = $('#search_methods');
|
||||
var $searchLogo = $('#search_logo');
|
||||
var initSearchType = searchTypeStore.get();
|
||||
$searchLogo.addClass(initSearchType).data('type', initSearchType);
|
||||
|
||||
var search_types = [
|
||||
{ url: 'https://www.baidu.com/s?wd=', type: 'baidu' },
|
||||
{ url: 'https://www.sogou.com/web?query=', type: 'sogou' },
|
||||
{ url: 'https://cn.bing.com/search?q=', type: 'bing' },
|
||||
{ url: 'https://www.so.com/s?q=', type: 'so' },
|
||||
{ url: 'https://www.google.com/search?q=', type: 'google' },
|
||||
{ url: 'http://www.cilimao.cc/search?word=', type: 'cili' },
|
||||
{ url: 'http://neets.cc/search?key=', type: 'yingyin' },
|
||||
{ url: 'http://www.panduoduo.net/s/name/', type: 'wangpan' },
|
||||
];
|
||||
$searchLogo.on('click', function () {
|
||||
$searchMethods.show();
|
||||
});
|
||||
|
||||
// 搜索引擎切换
|
||||
$searchMethods.on('click', 'li', function () {
|
||||
var type = $(this).data('type');
|
||||
searchTypeStore.set(type);
|
||||
$searchLogo.removeClass()
|
||||
.data('type', type)
|
||||
.addClass(type + ' search-logo');
|
||||
$searchMethods.hide();
|
||||
$('#search_keyword').focus();
|
||||
});
|
||||
$searchMethods.on('mouseleave', function () {
|
||||
$searchMethods.hide();
|
||||
});
|
||||
|
||||
var EVENT_CLEAR_KEYWORD = 'clearKeyword';
|
||||
var EVENT_SEARCH = 'search';
|
||||
// 关键词搜索输入
|
||||
$('#search_keyword').on('keyup', function (event) {
|
||||
var $keyword = $(this);
|
||||
var keyword = $keyword.val();
|
||||
if(event.which==13){
|
||||
if($('#search_result .active').length>0){
|
||||
keyword = $('#search_result .active').eq(0).text();
|
||||
}
|
||||
openSearch(keyword)
|
||||
return;
|
||||
}
|
||||
// TODO 上下键选择待选答案
|
||||
var bl = moveChange(event);
|
||||
if(bl){
|
||||
keywordChange(keyword);
|
||||
}
|
||||
}).on('blur', function () {
|
||||
$('#search_result').hide();
|
||||
}).on('focus', function () {
|
||||
var keyword = $(this).val();
|
||||
keywordChange(keyword);
|
||||
});
|
||||
|
||||
function moveChange(e){
|
||||
var k = e.keyCode || e.which;
|
||||
var bl = true;
|
||||
switch(k){
|
||||
case 38:
|
||||
rowMove('top');
|
||||
bl = false;
|
||||
break;
|
||||
case 40:
|
||||
rowMove('down');
|
||||
bl = false;
|
||||
break;
|
||||
}
|
||||
return bl;
|
||||
}
|
||||
function rowMove(move){
|
||||
var search_result = $('#search_result');
|
||||
var hove_li = null;
|
||||
search_result.find('.result-item').each(function(){
|
||||
if($(this).hasClass('active')){
|
||||
hove_li = $(this).index();
|
||||
}
|
||||
});
|
||||
if(move == 'top'){
|
||||
if(hove_li==null){
|
||||
hove_li = search_result.find('.result-item').length-1;
|
||||
}else{
|
||||
hove_li--;
|
||||
}
|
||||
}else if(move == 'down'){
|
||||
if(hove_li==null){
|
||||
hove_li = 0;
|
||||
}else{
|
||||
hove_li==search_result.find('.result-item').length-1?(hove_li=0):(hove_li++);
|
||||
}
|
||||
}
|
||||
search_result.find('.active').removeClass('active');
|
||||
search_result.find('.result-item').eq(hove_li).addClass('active');
|
||||
}
|
||||
|
||||
function keywordChange(keyword) {
|
||||
if (keyword === '') {
|
||||
$(document).trigger(EVENT_CLEAR_KEYWORD);
|
||||
} else {
|
||||
$(document).trigger(EVENT_SEARCH, keyword);
|
||||
$('#clear_keyword').show();
|
||||
}
|
||||
}
|
||||
|
||||
// 清空输入框
|
||||
$('#clear_keyword').on('click', function () {
|
||||
$('#search_keyword').val('');
|
||||
$('#search_keyword').focus();
|
||||
$(document).trigger(EVENT_CLEAR_KEYWORD);
|
||||
});
|
||||
|
||||
// 点击高亮显示
|
||||
$('#search_keyword').on('focus', function () {
|
||||
$('.search-left').css(
|
||||
{
|
||||
"border-style":"solid",
|
||||
"border-color": "rgba(24, 144, 255, 1)",
|
||||
"box-shadow": "0px 0px 2px 1px rgba(145, 213, 255, 0.96)",
|
||||
}
|
||||
);
|
||||
}).on('blur', function () {
|
||||
$('.search-left').prop('style','');
|
||||
});
|
||||
// 搜索
|
||||
$('#search_submit').on('click', function () {
|
||||
var keyword = $('#search_keyword').val();
|
||||
var type = getSeachType();
|
||||
var baseUrl = search_types.find(function (item) {
|
||||
return item.type === type;
|
||||
});
|
||||
if (baseUrl && keyword) {
|
||||
window.open(baseUrl.url + keyword);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 推荐结果跳转
|
||||
$('#search_result').on('click', 'li', function () {
|
||||
var word = $(this).text();
|
||||
$('#search_keyword').val(word);
|
||||
openSearch(word);
|
||||
$('#search_result').hide();
|
||||
});
|
||||
|
||||
$(document).on(EVENT_CLEAR_KEYWORD, function () {
|
||||
$('#clear_keyword').hide();
|
||||
$('#search_result').hide();
|
||||
});
|
||||
$(document).on(EVENT_SEARCH, function (e, keyword) {
|
||||
getSearchResult(keyword);
|
||||
});
|
||||
|
||||
// 获取搜索引擎类型
|
||||
function getSeachType() {
|
||||
return $('#search_logo').data('type');
|
||||
}
|
||||
|
||||
// google 搜索结果
|
||||
function searchResultGoogle(data) {
|
||||
var result = data[1];
|
||||
result = result.map(function (item) {
|
||||
return item[0];
|
||||
});
|
||||
renderSearchResult(result);
|
||||
}
|
||||
|
||||
// 百度 搜索结果
|
||||
function searchResultBaidu(data) {
|
||||
if (data === undefined) {
|
||||
return;
|
||||
}
|
||||
var result = data.s;
|
||||
renderSearchResult(result);
|
||||
}
|
||||
|
||||
// 渲染搜索结果
|
||||
function renderSearchResult(array) {
|
||||
var $result = $('#search_result');
|
||||
$result.empty().hide();
|
||||
if (!array || array.length <= 0) {
|
||||
return;
|
||||
}
|
||||
for (var i = 0; i < array.length; i++) {
|
||||
var $li = $('<li class=\'result-item\'></li>');
|
||||
$li.text(array[i]);
|
||||
$result.append($li);
|
||||
}
|
||||
$result.show();
|
||||
}
|
||||
|
||||
window.searchResultGoogle = searchResultGoogle;
|
||||
window.searchResultBaidu = searchResultBaidu;
|
||||
|
||||
var search_suggest = {
|
||||
baidu: {
|
||||
url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
|
||||
data: function (keyword) {
|
||||
return {
|
||||
wd: keyword,
|
||||
cb: 'window.searchResultBaidu',
|
||||
};
|
||||
},
|
||||
},
|
||||
google: {
|
||||
url: 'http://suggestqueries.google.com/complete/search',
|
||||
data: function (keyword) {
|
||||
return {
|
||||
q: keyword,
|
||||
jsonp: 'window.searchResultGoogle',
|
||||
client: 'youtube',
|
||||
};
|
||||
},
|
||||
},
|
||||
wangpan: {
|
||||
url: 'http://unionsug.baidu.com/su',
|
||||
data: function (keyword) {
|
||||
return {
|
||||
wd: keyword,
|
||||
cb: 'window.searchResultBaidu',
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
function getSearchResult(keyword) {
|
||||
var searchType = getSeachType();
|
||||
var suggest = search_suggest[searchType];
|
||||
if (!suggest) {
|
||||
suggest = search_suggest.baidu;
|
||||
}
|
||||
$.ajax({
|
||||
url: suggest.url,
|
||||
dataType: 'jsonp',
|
||||
data: suggest.data(keyword),
|
||||
});
|
||||
}
|
||||
|
||||
function openSearch(keyword) {
|
||||
var type = getSeachType();
|
||||
var baseUrl = search_types.find(function (item) {
|
||||
return item.type === type;
|
||||
});
|
||||
if (baseUrl && keyword) {
|
||||
window.open(baseUrl.url + keyword);
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user