个人网站创建百度搜索框

需求分析

点击提交按钮或者按回车键时，将输入框中的内容作为关键字进行百度搜索，在新的页面显示搜索结果。

当输入框中的内容变更时，将输入框中的内容作为关键字，用jsonp跨域请求的方式获取百度的suggestion数据，实时显示出来。

当鼠标移动到对应的suggestion项上时，该项高亮，并将输入框中的内容更新为该suggestion的内容。此时点击鼠标或者按回车键时，执行搜索操作。

也可以按键盘上下键来选取对应的suggestion项，按回车键执行搜索操作。注意设置suggestion列表为循环结构，即在最后一项时按下键选中第一项，在第一项时按上键选中最后一项。

当输入框失去焦点时，删除suggestion列表。

代码实现

*1. 基本组件

<div>
<input id="input_search" type="text" oninput="getSuggestion()" onblur="hiddenSuggestion()" onkeydown="move(event)">
<div id="suggestion" hidden="hidden">
<ul id="suggestionUl"></ul>
</div>
</div>
<div>
<input type="button" value="Search" onclick="search()">
</div>

*2. 输入框内容变化时调用getSuggestion方法

function getSuggestion(){
var strdomin = $.trim($("#input_search").val());
//jsonp跨域请求，参数wd为关键字；参数p恒为3，暂时不知道用途；参数cb为请求成功后的回调函数的名字，自己实现这个函数来处理得到的数据
var qsData = { 'wd': strdomin, 'p': '3', 'cb': 'getData' };
$.ajax({
async: false,
url: "http://suggestion.baidu.com/su",
type: "GET",
dataType: 'script',
data: qsData,
timeout: 500,
success: function (json) {
},
error: function (xhr) {
}
});
}

*3. 编写回调函数getData获取suggestion数据并显示

function getData(mydata){//参数mydata即为返回的数据，suggestion以数组形式保存在mydata.s中
//先清除原来的suggesion列表
clearSuggestion();
var length = mydata.s.length;
var data = mydata.s;
if (length == 0) {
//没有请求到suggestion时则不显示suggestion列表
hiddenSuggestion();
} else {
//显示suggestion列表
showSuggestion();
//suggestionLength和index是两个全局变量，代表列表项长度和索引，在编写键盘事件函数时会用到
suggestionLength = (length > 10 ? 10 : length);
index = 0;
for (i = 0; i < (length > 10 ? 10 : length); i++) {
var li = $("<li id='li"+i+"' onMouseOver='mouseOverEvent(this)' onMouseOut='mouseOutEvent(this)' onclick='search()'></li>").text(data[i]);
$("#suggestionUl").append(li);
}
}
}

*4. suggestion列表的显示、隐藏、清除函数

function showSuggestion(){
$("#suggestion").removeAttr("hidden");
}
function hiddenSuggestion(){
$("#suggestion").attr("hidden","hidden");
}
function clearSuggestion(){
$("#suggestionUl").html("");
}

*5. 编写鼠标事件函数

function mouseOverEvent(x){
$("#input_search").val(x.innerHTML);//更新输入框的内容
x.className = "mouseOver";//修改样式为高亮
//若不清除onblur属性，在点击鼠标时，将先执行hiddenSuggestion方法，这样鼠标就点击不到对应的suggestion项，无法执行search方法进行搜索
$("#input_search").removeAttr("onblur");
}
function mouseOutEvent(x){
x.className = "mouseOut";//将样式恢复原样
$("#input_search").attr("onblur","hiddenSuggestion()");
}

*6. 编写键盘事件函数

function move(x){
if (x.keyCode == 13) {//按回车，则执行搜索操作
search();
} else if (x.keyCode == 40 && index == 0) {//若第一次按下键，则选中第一个suggestion项，并更新索引值
var li0 = document.getElementById("li0");
mouseOverEvent(li0);
index = 1;
} else if (x.keyCode == 40 && index == suggestionLength) {//若在选中最后一个suggestion项时按下键，则选中第一个suggestion项，并更新索引值
var li0 = document.getElementById("li0");
mouseOverEvent(li0);
var li = document.getElementById("li"+(suggestionLength-1));
mouseOutEvent(li);
index = 1;
} else if (x.keyCode == 38 && index == 1) {//若在选中第一个suggestion项时按上键，则选中最后一个suggestion项，并更新索引值
var li = document.getElementById("li"+(suggestionLength-1));
mouseOverEvent(li);
var li2 = document.getElementById("li0");
mouseOutEvent(li2);
index = suggestionLength;
} else if (x.keyCode == 38) {//按上键的普通情况
var li2 = document.getElementById("li"+(index-1));
index--;
var li = document.getElementById("li"+(index-1));
mouseOverEvent(li);
mouseOutEvent(li2);
} else if (x.keyCode == 40) {//按下键的普通情况
var li2 = document.getElementById("li"+(index-1));
index++;
var li = document.getElementById("li"+(index-1));
mouseOverEvent(li);
mouseOutEvent(li2);
}
}

*7. 编写搜索操作函数

//注意要先把输入框中的内容转码，防止出现#截断符号使其后内容被忽略的情况
function search(){
hiddenSuggestion();
var value_search = encodeURIComponent($.trim($("#input_search").val()));
window.open("https://www.baidu.com/s?wd="+value_search);
}

网站链接

http://www.francis2017.cn/lixiao