react 写的百度搜索框全部功能实现
先上效果图
1、获取数据用的axios ,没有用jsonp,jsonp下次写,脚手架需要下载axios。
2、需要跨域软件,自己在Google浏览器安装一个跨域软件。
3、需要事件onKeyDown,onKeyUp(键盘事件),onClick(鼠标点击跳转),onMouseMove(鼠标移入事件),
4,摁下上键(keyCode值为40)、下键(keyCode值为38)回车键(keyCode值为13)不能让搜索,40、38 需要改变搜索到数据渲染之后状态(和鼠标移入效果相同)13需要跳转页面(和鼠标点击跳转一下)。
时间仓促 css样就随便写了点,上代码!App.css
html,body,ul,ol{
margin: 0;
padding: 0;
list-style: none;
}
input{
width: 600px;
height: 50px;
position: relative;
left: 50%;
margin-left: -300px;
top: 40px;
font-size: 20px;
}
.one{
width: 600px;
position: relative;
left: 50%;
top: 40px;
margin-left: -300px;
border-left: 1px solid black;
border-right: 1px solid black;
}
.one>li{
border-bottom: 1px solid black;
height: 50px;
line-height: 50px;
}
.active{
background: grey;
}
js代码 App.js
import React, { Component } from 'react';
import axios from 'axios';
import './App.css';
class App extends Component {
constructor(...ags) {
super(...ags);
this.state = {
arr: [],
num:-1,
oDefault:''
}
}
HandoverValue = (id) =>{
if(id === -1){
this.refs['x'].value = this.state.oDefault;
return;
}
this.refs['x'].value = this.state.arr[id]
}
openPage=()=>{
console.log(this.state.num,this.state.arr.length)
if(this.state.num === -1 || this.state.num >= this.state.arr.length){
window.open(`https://www.baidu.com/s?wd=${this.state.oDefault}` )
return;
}
window.open(`https://www.baidu.com/s?wd=${this.state.arr[this.state.num]}` )
}
add = (ev) => {
let eve = ev;
let oEvent = ev.keyCode;
if (oEvent === 38 || oEvent === 13 || oEvent === 40) {
if(oEvent === 13){
this.openPage()
}
return;
}
this.setState({
oDefault:ev.target.value
})
axios.get(`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${eve.target.value}`).then((res) => {
let str = res.data;
let str2 = str.slice(16, str.length - 1);
this.setState({
arr: [...eval(`(${str2})`).s]
})
})
}
onMove=(id)=>{
this.setState({
num:id
})
this.HandoverValue(id);
}
ofn=(event)=>{
let oEvent = event.keyCode;
if(oEvent == 40){
let num = this.state.num;
num++;
if(num > this.state.arr.length-1){
this.setState({
num:-1
})
this.HandoverValue(-1)
return;
}
this.setState({
num
});
this.HandoverValue(num)
}
if(oEvent == 38){
let num = this.state.num;
num--;
if(num < 0){
this.setState({
num:this.state.arr.length
})
this.HandoverValue(-1)
return;
}
this.setState({
num
})
this.HandoverValue(num)
}
}
render() {
let {arr,num} = this.state;
return (
<div className="App">
<input type='text' ref='x' onKeyUp={(event) => this.add(event)} onKeyDown={(event)=>this.ofn(event)}></input>
<ul className='one' style={{display:arr.length==0?'none':'block'}}>
{
arr.map((val,index)=>{
return <li key={index} className={num == index?'active':''} onClick={this.openPage} onMouseMove={()=>this.onMove(index)}>{val}</li>
})
}
</ul>
</div>
);
}
}
export default App;
本文章为个人所写,并非转载,欢迎留言,我会尽快的回复,谢谢,时间太仓促了