一个项目的开发往往是多人协同开发,为了防止我们自己在开发时候写的代码会影响到其他人写的代码,这就需要我们独立命名一个对象变量,就在这个对象里面编写我们自己的代码。
现在就用这种方法实现豆瓣电影搜索功能。
效果,搜索前:
输入搜索内容,搜索结果:
代码详情:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./index.css">
<title>豆瓣搜索</title>
</head>
<body>
<div class="app">
<div class="logo">
<img src="./logo.jpg" alt="">
</div>
<div class="search">
<div class="search_box">
<div class="search_inp">
<input type="text" placeholder="搜索电影、电视剧、综艺、影人">
</div>
<div class="search_btn"></div>
</div>
<div class="search_list">
<ul class="ulList">
</ul>
</div>
</div>
</div>
<script src="./index.js"></script>
<script>
search.initData({
el:document.getElementsByClassName('app'),
oInputDom:document.getElementsByTagName('input')[0],
oSearchList:document.getElementsByClassName('search_list'),
oUlList:document.getElementsByClassName('ulList'),
});
search.handle();
</script>
</body>
</html>
css:
*{
margin: 0;
padding: 0;
list-style: none;
}
.app{
width: 840px;
margin: 10px auto;
/* height: 300px; */
/* border: 1px solid black; */
display: flex;
}
.logo{
width: 150px;
height: 80px;
}
.logo img{
width: 100%;
height: 100%;
}
.search{
width: 650px;
}
.search_box{
width: 100%;
height: 40px;
margin-top: 20px;
margin-left: 20px;
display: flex;
}
.search_inp{
width: 80%;
height: 40px;
}
.search_inp input{
width: 100%;
height: 100%;
padding-left: 10px;
border-radius: 3px;
border: none;
outline: none;
box-shadow: 0px 1px 3px #ccc;
font-size: 18px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom: none;
}
.search_btn{
width:46px;
height: 40px;
background-color: rgb(149, 153, 162);
border-radius: 3px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
background-image: url('./search.png');
background-repeat: no-repeat;
background-position: center center;
cursor: pointer;
}
.search_list{
width: 80%;
/* height: 300px; */
/* border: 1px solid #9d9d9d; */
margin-left: 20px;
display: none;
}
.search_list ul{
width: 100%;
}
.search_list_item{
width: 100%;
height: 90px;
border: 1px solid #ccc;
}
.item_box{
width: 90%;
height: 74px;
margin: 8px;
/* border: 1px solid black; */
display: flex;
}
.poster{
width: 60px;
height: 74px;
}
.poster img{
width: 100%;
height: 100%;
}
.content{
margin-left: 10px;
}
.content p{
margin-bottom: 5px;
}
.content .desc{
font-size: 14px;
color: #9d9d9d;
}
JS:
var search = {
initData(options) {
this.el = options.el;
this.oInputDom = options.oInputDom;
this.oSearchList = options.oSearchList;
this.oUlList = options.oUlList[0];
this.movieList = [];
this.preInputText='';
this.key=false;
},
handle() {
this.handleInput();
this.handleFocus();
this.handleBlur();
this.getData();
this.keyDownSearch();
},
handleInput() {
this.oInputDom.oninput = (e) => {
var e = event || window.event;
var target = e.srcElement ? e.srcElement : e.target;
var inputText = target.value.trim();
// console.log(inputText)
// console.log(this.preInputText)
if(inputText == ''){
this.oUlList.innerHTML = ''
this.preInputText = ''
}else{
if(inputText === this.preInputText){return};
var newMoveList=this.searchByIndexOf(inputText, this.movieList);
this.renderList(newMoveList);
this.preInputText = inputText;
}
// console.log(this.preInputText)
}
},
handleFocus() {
this.oInputDom.onfocus = () => {
this.oSearchList[0].style.display = "block"
}
},
handleBlur() {
this.oInputDom.onblur = () => {
this.oSearchList[0].style.display = "none"
}
},
getData() {
fetch('https://douban.uieee.com/v2/movie/in_theaters')
.then(res => res.json())
.then(data => {
this.movieList = data.subjects;
console.log(this.movieList)
})
.catch(error => {
console.log(new Error(error))
})
},
//回车查询
keyDownSearch() {
this.oInputDom.onkeydown = (e) => {
var e = event || window.event;
var target = e.srcElement ? e.srcElement : e.target;
if (e.keyCode == 13) {
var inputText = target.value.trim();
var newMoveList=this.searchByIndexOf(inputText, this.movieList);
console.log(newMoveList)
this.renderList(newMoveList);
}
}
},
//模糊查询
searchByIndexOf(keyWord, list) {
if (!(list instanceof Array)) return;
var len = list.length;
var arr = [];
list.forEach((item, index) => {
if (item.title.indexOf(keyWord) >= 0) {
arr.push(item);
}
})
return arr;
},
//渲染电影搜索列表
renderList(renderMoveList) {
this.oUlList.innerHTML =''
// console.log(renderMoveList)
renderMoveList.forEach((item,index)=>{
let li = document.createElement('li');
li.className = 'search_list_item';
li.innerHTML = `<div class="item_box">
<div class="poster">
<img src="${item.images.medium}" alt="">
</div>
<div class="content">
<p>
<span style="color: rgb(130, 183, 210);">${item.original_title}</span>
<span class="desc">${item.year}</span>
</p>
<p class="desc">上映时间:${item.mainland_pubdate}</p>
<p class="desc">评分:${item.rating.average}</p>
</div>
</div>`
this.oUlList.appendChild(li);
})
},
}