React实现百度搜索框

import React,{Component} from ‘react‘
import ReactDOM,{render} from ‘react-dom‘
import ‘bootstrap/dist/css/bootstrap.min.css‘
// import PropTypes from ‘prop-types‘;
import JSONP from  ‘jsonp‘

//封装jonsp为promise对象
function jsonp(url,opts={}) {
    return new Promise((resolve,reject)=>{
        JSONP(url,opts, (err,data)=> {
           if (err) reject(err);
           resolve(data);
        })
    })
}

class SearchCom extends Component{
    constructor(){
       super();
       this.state={
           val:"",
           arr:[],
           index:-1
       }
    }
    handleChange = async (e)=>{
        this.setState({val:e.target.value});
        let {s} = await  jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+this.state.val,{param:"cb"});
        this.setState({arr:s});
    }
    handleKeyUp= (e)=>{
        let keyCode = e.keyCode;
        if (keyCode === 38 || keyCode === 40) {
           if (keyCode === 38){
               this.setState({index:this.state.index-1})
               if (this.state.index<0){
                  this.setState({index:this.state.arr.length-1});
               }
               //根据上下键切换,则给表单时面赋不同的值
               e.target.value=this.state.arr[this.state.index+1];
               this.setState({val:e.target.value});
           } else{
               this.setState({index:this.state.index+1})
               if (this.state.index >= this.state.arr.length-1) {
                   this.setState({index:-1});
               }
               //根据上下键切换,则给表单时面赋不同的值
               e.target.value = this.state.arr[this.state.index+1];
               this.setState({val:e.target.value});
           }
        }
    }
    handleKeyDown= (e)=>{
        if (e.keyCode ===13){
            //https://www.baidu.com/s?wd=xxx  百度的查询接口
            window.open(‘https://www.baidu.com/s?wd=‘ + this.state.val, ‘_blank‘);
        }
    }
    render(){
        let style ={marginTop:"20px"}
        return (
            <div className=‘container‘ style={style}>
                <input type="text" defaultValue={this.state.val} onChange={this.handleChange} onKeyUp={this.handleKeyUp}  onKeyDown={this.handleKeyDown} className=‘form-control‘ placeholder=‘百度搜索框‘/>
                <ul className=‘list-group‘>
                    {this.state.arr.map((item,key)=>{
                      return  <li className={key===this.state.index ? ‘list-group-item active‘ :"list-group-item"} key={key}>{item}</li>
                    })}
                </ul>
                <p>索引{this.state.index}</p>
            </div>
        )
    }
}

//简单的实现数据v-model实现   一定要用defaultValue  如果直接用value 则会将值写死,不会再改变了
render(<SearchCom/>, document.getElementById("root"))

  



原文地址:https://www.cnblogs.com/leigepython/p/9283613.html

时间: 2024-11-29 12:24:24

React实现百度搜索框的相关文章

模拟百度搜索框,输入时显示历史记录

今天写了个小demo,利用本地存储的特点,模拟百度搜索框. 主要知识是利用本地存储的特点,模拟百度搜索时的历史记录显示. 主要HTML代码为 <div class="search"> <input type="text"/> <button class="btn">搜索</button> </div> <ul class="hidden"> <li&

模拟百度搜索框

在使用百度搜索是,页面会根据我们输入的内容自动匹配一些候选内容. 实现的主要过程主要是: 1.用户在输入一个字符结束后,在onkeyup事件中获取用户输入的内容. 2.根据获取到的内容向服务器发送请求,匹配到相似的数据,存到数组中. 3.判断数组是否有内容,如果有数据,就在搜索框下面遍历匹配到的内容(候选项). 首先,要写好页面布局 html部分 <html> <head> <meta http-equiv="Content-Type" content=&

“百度搜索框提示”代码

使用方法: 百度提供了2种自定义调用的方法方法一: 第一步为需要添加“百度搜索框提示”功能的<input>标签添加baiduSug属性.例如:<input type=”text” name=”word” baiduSug=”1|2″>当设置baiduSug=1时,用户选中sug词条时默认执行表单提交动作:当设置baiduSug=2时,用户选中sug词条时不执行表单提交动作.       第二步      在网页中引入Javascript文件: <script charset=

站长工具|百度搜索框提示功能

百度向站长开放免费“百度搜索框”代码和“百度搜索框提示”代码.只需进行简单的设置, 即可将“ 百度搜索框( 带提示功能)”功能快速加入到您的网页中.提升用户在网站中的搜索体验. 根据不同类型的网站需求,站长工具一共提供三种引入方式供您选择: 简单方式——方便的将“百度搜索框(带提示功能)”直接加入到您的网页中.将以下代码加入到您的网页中,即可获得带有“搜索框提示”功能的百度搜索框 HTML代码: <form action=”http://www.baidu.com/baidu” target=”

百度搜索框提示

方法一: 第一步 为需要添加“百度搜索框提示”功能的<input>标签添加baiduSug属性.例如:<input type=”text” name=”word” baiduSug=”1|2″> 当设置baiduSug=1时,用户选中sug词条时默认执行表单提交动作: 当设置baiduSug=2时,用户选中sug词条时不执行表单提交动作. 第二步 在网页中引入Javascript文件:<script charset=”gbk” src=”http://www.baidu.co

上课笔记_使用DWR实现自动补全 类似百度搜索框的自动显示效果

使用DWR实现自动补全 自动补全:是指用户在文本框中输入前几个字母或汉字的时候,自动在存放数据的文件或数据库中将所有以这些字母或汉字开头的数据提示给用户供用户选择 在日常上网过程中,我们经常使用搜索引擎,当我们输入想要检索的关键字时,搜索引擎会提示我们相关的关键字 训练要点: 掌握使用DWR框架开发Ajax程序 使用MyEclipse 10.0 + MySql5.0 新建数据库:可以手动随便新建一个测试用的 DROP TABLE IF EXISTS `books`; CREATE TABLE `

原生JS模拟百度搜索框

近期有个新入行的小伙伴一直在问一些基础知识,突然觉得人的记忆力有限,有些平常很少用到的知识点虽简单却也其实很容易模糊,或者是一个单词,或者是一个语法.所以想着应该利用一下工作之余的碎片时间,记录一些工作上的问题和一些有趣的小案例,于是开通了播客,一方面便于自己日后翻阅,一方面给刚学习的小伙伴一个参考. 今天先写一个简单的小案例:原生JS模拟百度搜索框. 需求: 1.当在输入框输入时,每输入一个文字,就会在下方展示相关内容列表 2.每一次输入框输入,清空上一次内容 3.鼠标移入列表内容时,对应的内

在页面中嵌入百度搜索框

呈现效果如下: 实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>在页面中嵌入百度搜索框</title> <style> form { width: 500px; height: 50px; padding: 10px 20px 20px; text-align: center; line-height: 50px;

小练习:用jQuery简单模拟百度搜索框的提示功能

今天第一次接触jQuery,用jQuery模拟了一下百度搜索的自动提示功能.连带jQuery的基本知识点,简单总结如下: 首先得在工程中导入插件:jquery-1.4.2.js ,并在html的head中引入该js: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html>