import React, { Component } from "react";
import "./search.scss";
interface Props {}
interface state {
searchList: Array<string>;
newTestList: Array<string>;
}
export default class SearchHistory extends Component<Props, state> {
refs: any = React.createRef();
// searchList: Array<string> = [];
keyWord: string = "";
testLists: Array<string> = [
"小张",
"小苏",
"小杨",
"老张",
"老苏",
"老杨",
"老爷爷",
"小妹妹",
"老奶奶",
"大鹏",
"大明",
"大鹏展翅",
"你好",
"hello",
"hi",
"sssasdss",
"qwezc",
"叮当",
];
testListBox: HTMLElement | null = null;
// eslint-disable-next-line @typescript-eslint/no-useless-constructor
constructor(props: Props) {
super(props);
this.state = {
searchList: localStorage.list ? localStorage.list.split(",") : [],
newTestList: [],
};
}
search(keyWord?: string) {
this.keyWord = keyWord ? keyWord : this.refs.value;
// this.state.searchList.push(this.keyWord)
if (
this.keyWord === "" ||
this.state.searchList.indexOf(this.keyWord) !== -1
) {
this.refs.value = "";
return;
}
if (this.state.searchList.length < 8) {
this.setState(
{
searchList: [this.keyWord, ...this.state.searchList],
},
() => {
localStorage.list = [...this.state.searchList];
console.log(this.state.searchList);
}
);
} else {
this.state.searchList.pop();
this.setState(
{
searchList: [this.keyWord, ...this.state.searchList],
},
() => {
localStorage.list = [...this.state.searchList];
console.log(this.state.searchList);
}
);
}
console.log(this.state.searchList);
this.refs.value = "";
this.testListBox = document.querySelector(".test-list");
if (this.testListBox) {
this.testListBox.style.display = "none";
}
}
// 删除操作
deleteList() {
if (window.confirm("确定要执行此操作吗?")) {
this.setState(
{
searchList: [],
},
() => {
localStorage.list = "";
}
);
return true;
}
return false;
}
// 搜索提示
testShow() {
this.keyWord = this.refs.value;
this.testListBox = document.querySelector(".test-list");
if (this.keyWord.length > 0) {
this.setState({
newTestList: this.testLists.filter(
(item) => item.indexOf(this.keyWord) !== -1
),
});
if (this.testListBox) {
this.testListBox.style.display = "block";
}
} else {
if (this.testListBox) {
this.testListBox.style.display = "none";
}
}
}
testHidden(e: any) {
this.keyWord = this.refs.value = e.target.innerHTML;
this.search(this.keyWord);
console.log(this.keyWord);
this.testListBox = document.querySelector(".test-list");
if (this.testListBox) {
this.testListBox.style.display = "none";
}
}
render() {
return (
<div className="search-history">
<div className="search-bar">
<input
type="search"
ref={(input: HTMLInputElement) => (this.refs = input)}
placeholder="输入你想搜索的内容"
onChange={this.testShow.bind(this)}
/>
<button onClick={this.search.bind(this, undefined)}>搜索</button>
<div className="test-list">
{this.state.newTestList.length > 0 ? (
this.state.newTestList.map((item, index) => (
<div
className="test-list-item"
key={index}
onClick={this.testHidden.bind(this)}
>
{item}
</div>
))
) : (
<div className="test-list-item">没有找到你想搜索的内容</div>
)}
</div>
</div>
<div
className="search-list"
style={{
display: this.state.searchList.length > 0 ? "block" : "none",
}}
>
<div className="title">
<h3>历史搜索</h3>
<span onClick={this.deleteList.bind(this)}>清空</span>
</div>
<div className="lists">
{this.state.searchList.length > 0
? this.state.searchList.map((conn, index) => (
<div className="item" key={index}>
{conn}
</div>
))
: null}
</div>
</div>
</div>
);
}
}
【react+ts】react+ts实现仿百度搜索提示框
最新推荐文章于 2024-04-27 21:31:54 发布