效果图:
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample010 - 百度首页搜索项目</title>
<link rel="stylesheet" type="text/css" href="css/cute.css" />
<link rel="stylesheet" type="text/css" href="css/index1.css" />
</head>
<body>
<div class="search-container" id="search_container">
<div class="logo"></div>
<div class="search">
<input type="text" name="" id="search_value">
<button id="search_btn">百度一下</button>
</div>
</div>
</body>
<!-- 当页面加载完成,载入JavaScript文件,为Html元素添加动作 -->
<script src="js/index1.js" type="text/javascript" charset="utf-8"></script>
</html>
css代码:
body{
width: 100%;
height: 1000px;
background-color: rgb(238, 137, 137);
}
.search-container{
position: relative;
width: 641px;
margin: 0px auto;
border: 1px solid transparent;
}
.logo{
width: 641px;
height: 258px;
background: url("../img/logo.png") no-repeat center center;
margin: 50px auto;
}
.search{
width: 641px;
height: 40px;
background: url("../img/search.png") no-repeat center center;
margin: 0px auto;
}
#search_value{
border: none;
width: 485px;
height: 39px;
font-size: 15px;
padding-left: 10px;
outline: none;
}
#search_btn{
margin-left: 36px;
height: 40px;
width: 104px;
border: none;
cursor: pointer;
float: right;
}
div.search-result {
width: 535px;
background: #F9F9F9;
border: 1px solid #E0E0E0;
overflow: hidden;
position: relative;
z-index: 1000;
}
div.search-result>p {
margin: 0px;
padding: 0px 10px;
height: 35px;
line-height: 35px;
display: block;
}
div.search-result>p:hover {
color: #000;
background: #E9E9E9;
cursor: pointer;
}
div.search-container button {
outline: none;
border: none;
width: 104px;
height: 40px;
background: #E6E6E6;
cursor: pointer;
float: right;
}
js代码:
/*获取任意标签的内容*/
function getInnerText(element) {
// 判断浏览器是否支持textContent,如果支持,则使用textContent获取内容,否则使用innerText获取内容。
if(typeof element.textContent == "undefined") {
return element.innerText;
} else {
return element.textContent;
}
}
/*设置任意标签的内容*/
function setInnerText(element, text) {
// 判断浏览器是否支持textContent,如果支持,则使用textContent设置内容,否则使用innerText设置内容。
if(typeof element.textContent == "undefined") {
return element.innerText = text;
} else {
return element.textContent = text;
}
}
// 数据数组
let dataArray=["林俊杰","林志颖","林晓","小明","小红"];
// 获取search_container
let search_container=document.getElementById("search_container")
// 获取search_value
let search_value=document.getElementById("search_value");
// 定义搜索引擎
let url="https://www.baidu.com/s?ie=UTF-8&wd=";
search_value.onkeyup=function(){
// 每一次按键抬起都判断当前是否存在搜索区域框,如果存在则删除
if(document.getElementById("search_result")) {
search_container.removeChild(document.getElementById("search_result"));
}
// 获取搜索框文本
let search_input_value=this.value;
// 缓存数据
let tempArray=[];
// 循环判断输入框的值是否为数据数组中的开头关键字
for(let i=0;i<dataArray.length;i++){
// indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
if(dataArray[i].indexOf(search_input_value)==0){
// 如果出现则放在空数组中抛出
tempArray.push(dataArray[i]);
}
}
// 如果文本框内容为空或者临时数组为空则不显示搜索结果
if(this.value.length == 0 || tempArray.length == 0) {
if(document.getElementById("search_result")) {
search_container.removeChild(document.getElementById("search_result"));
}
// 如果符合以上两个条件则终止下面的所有代码
return;
}
// 创建search_result搜索结果显示区域
// 创建div
let search_result=document.createElement("div");
// appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
search_container.appendChild(search_result);
// 给新节点添加class
search_result.className="search-result";
// 给新节点添加id
search_result.id="search_result";
// 循环遍历临时数组tempArray 创建对应的搜索结果p标签
for(let i = 0; i < tempArray.length; i++) {
// 创建p标签
let pObj = document.createElement("p");
// 吧p加到div中
search_result.appendChild(pObj);
// 给pOjb添加内容
setInnerText(pObj, tempArray[i]);
}
// 循环遍历所有搜索结果p标签
// 获取p标签
var pObjs = search_result.getElementsByTagName("p");
for(var i = 0; i < pObjs.length; i++) {
pObjs[i].onclick = function() {
// 当前页面打开URL页面 =url加上输入的内容
window.location.href = url + getInnerText(this);
};
}
};
/*附加功能*/
document.getElementById("search_btn").onclick = function() {
var text = document.getElementById("search_value").value;
window.location.href = url + text;
}