简单的模糊搜索案例

最新推荐文章于 2024-05-08 09:36:46 发布

YaNglIN123i

最新推荐文章于 2024-05-08 09:36:46 发布

阅读量3.4k

点赞数

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/YaNglIN123i/article/details/127843256

版权

文章目录

前言

此案例是一个简单的模糊搜索功能，记录的点是怎么保持原数组不改变。

一、基本功能的实现

1.初始化

正常情况下input没有值的时候页面因该为其他样式，由于是demo就将所有的都展示出来了

2.搜索

当我搜索“ab”时是可以通过过滤来实现模糊搜索，此时是没问题的。问题在下一步。

3.清空再次搜索

当清空输入框在此搜索“e”时内容就不见了，这个原因也非常简单因为前两次搜索都会将原数组不停的过滤掉。

4.完整代码如下

import React, { Component } from "react";
import './index.css'
class index extends Component {
myers = React.createRef();
  state = {
    list: [
      { id: 1, name: "a" },
      { id: 2, name: "ab" },
      { id: 3, name: "abc" },
      { id: 4, name: "d" },
      { id: 5, name: "e" },
      { id: 6, name: "f" },
    ],
    const: '',
  };
 
  changeInput = ( e)=>{
    this.setState({const: e.target.value})
  }

  // 模糊搜索
  search = () => {
    const { list} = this.state;
   const newList = list.filter((item) => {
    return item.name.includes(this.state.const)
    });
    
    this.setState({   list: newList });
  };

  render() {
    return (
  
     <div style={{border:'1px solid black ',width:'300px',height:'400px'}}>
          <input type="text" value={this.state.const} onChange={(e)=>this.changeInput(e)} />
          <button onClick={this.search}>搜索</button>
          <ul>
            {
              this.state.list.map((item,index)=>{
                return <li key={index}>{item.name}
                </li>
              })
            }
          </ul>
      </div>
    );
  }
}

export default index;

二、解决方法（简单）

1.进行原数据的备份

我们需要在state中新建一个状态作为备份

 state = {
    list: [
      { id: 1, name: "a" },
      { id: 2, name: "ab" },
      { id: 3, name: "abc" },
      { id: 4, name: "d" },
      { id: 5, name: "e" },
      { id: 6, name: "f" },
    ],
    backList:[
      { id: 1, name: "a" },
      { id: 2, name: "ab" },
      { id: 3, name: "abc" },
      { id: 4, name: "d" },
      { id: 5, name: "e" },
      { id: 6, name: "f" },
    ],//备份数组
    const: '',
  };

2.操作备份数据

在search函数中我们只对备份数组进行操作，这样就可以实现清空输入框后在此搜索的效果了

  // 模糊搜索 
search = () => {
    const { backList} = this.state;
   const newList = backList.filter((item) => {
    return item.name.includes(this.state.const)
    });
    
    this.setState({   list: newList });
  };

3.修改过后完整代码

import React, { Component } from "react";
import "./index.css";
class index extends Component {
  myers = React.createRef();
  state = {
    list: [
      { id: 1, name: "a" },
      { id: 2, name: "ab" },
      { id: 3, name: "abc" },
      { id: 4, name: "d" },
      { id: 5, name: "e" },
      { id: 6, name: "f" },
    ],
    backList: [
      { id: 1, name: "a" },
      { id: 2, name: "ab" },
      { id: 3, name: "abc" },
      { id: 4, name: "d" },
      { id: 5, name: "e" },
      { id: 6, name: "f" },
    ], //备份数组
    const: "",
  };

  changeInput = (e) => {
    this.setState({ const: e.target.value });
  };

  // 模糊搜索
  search = () => {
    const { backList } = this.state;
    const newList = backList.filter((item) => {
      return item.name.includes(this.state.const);
    });

    this.setState({ list: newList });
  };

  render() {
    return (
      <div
        style={{ border: "1px solid black ", width: "300px", height: "400px" }}
      >
        <input
          type="text"
          value={this.state.const}
          onChange={(e) => this.changeInput(e)}
        />
        <button onClick={this.search}>搜索</button>
        <ul>
          {this.state.list.map((item, index) => {
            return <li key={index}>{item.name}</li>;
          })}
        </ul>
      </div>
    );
  }
}

export default index;