如何对此名称进行实时搜索反应js？

Question

I am trying to make live search for name in table but i can't make live search i don't know how to do this i wrote my code like this as i mentioned please help me how to make live search on name field foe table and in Search Page i used onSubmit={this.props.loaddata like this thanks

import React, { Component } from "react";
import Search from "../../views/Cars/Search";

class Search1 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      query: []
    };
  }

  // Get Data from filter date
  getData = async e => {
    try {
      const search = e.target.elements.search.value;
      e.preventDefault();
      const res = await fetch(`https://swapi.co/api/people/?search=${search}`);
      const query = await res.json();
      console.log(query);
      this.setState({
        query: query.results
      });
    } catch (e) {
      console.log(e);
    }
  };

  async componentDidMount() {
    // let authToken = localStorage.getItem("Token");
    try {
      const res = await fetch(`https://swapi.co/api/people/`);
      const query = await res.json();
      // console.log(movie);
      this.setState({
        query: query.results
      });
    } catch (e) {
      console.log(e);
    }
  }

  render() {
    const options = this.state.query.map(r => <li key={r.id}>{r.name}</li>);
    return (
      <div>
        <Search loaddata={this.getData} />
        {options}
      </div>
    );
  }
}

export default Search1;

Answer 1

Genrally You can try React-Search

  import Search from 'react-search'
  import ReactDOM from 'react-dom'
  import React, { Component, PropTypes } from 'react'

  class TestComponent extends Component {

  HiItems(items) {
     console.log(items)
  }

  render () {
     let items = [
        { id: 0, value: 'ruby' },
        { id: 1, value: 'javascript' },
        { id: 2, value: 'lua' },
        { id: 3, value: 'go' },
        { id: 4, value: 'julia' }
     ]

     return (
        <div>
        <Search items={items} />

        <Search items={items}
                 placeholder='Pick your language'
                 maxSelected={3}
                 multiple={true}
                 onItemsChanged={this.HiItems.bind(this)} />
        </div>
     )
  }
  }

Answer 2

Made few changes to your component. Send e.target.value from your child component

class Search1 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      query: []
    };
  }

  // Get Data from filter date
  getData = search => {
    const url = `https://swapi.co/api/people${search ? `/?search=${search}` : ``}`;
    // e.preventDefault();
    fetch(url)
      .then(res => res.json())
      .then(data =>
        this.setState({
          query: data.results || []
        })).catch(e => console.log(e));
  };

  async componentDidMount() {
    // let authToken = localStorage.getItem("Token");
    this.getData();
  }

  render() {
    const options = this.state.query.map(r => <li key={r.id}>{r.name}</li>);
    return (
      <div>
        <Search loaddata={this.getData} />
        {options}
      </div>
    );
  }
}

export default Search1;

Answer 3

For Gettind Data from Api you can follow this code of react-search

     import Search from 'react-search'
     import ReactDOM from 'react-dom'
     import React, { Component, PropTypes } from 'react'

     class TestComponent extends Component {

     constructor (props) {
        super(props)
        this.state = { repos: [] }
     }

     getItemsAsync(searchValue, cb) {
        let url = `https://api.github.com/search/repositories?q=${searchValue}&language=javascript`
        fetch(url).then( (response) => {
           return response.json();
        }).then((results) => {
           if(results.items != undefined){
           let items = results.items.map( (res, i) => { return { id: i, value: res.full_name } })
           this.setState({ repos: items })
           cb(searchValue)
           }
        });
     }

     render () {
        return (
           <div>
           <Search items={this.state.repos}
                    multiple={true}
                    getItemsAsync={this.getItemsAsync.bind(this)}
                    onItemsChanged={this.HiItems.bind(this)} />
           </div>
        )
     }