js small exercise--Baidu input box search

Effect picture:

html code:

<!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 code:

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 code:

/*获取任意标签的内容*/
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;
}

js small exercise--Baidu input box search

Guess you like