【搜索即时匹配】实战项目

最新推荐文章于 2022-11-11 17:17:36 发布

今天加个小需求～～

最新推荐文章于 2022-11-11 17:17:36 发布

阅读量368

点赞数

文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/m0_58237008/article/details/122181874

版权

本文分享了如何利用Antd UI框架快速实现前端搜索即时匹配功能。通过在input框中输入时发送请求，结合Autocomplete、Input和Message组件，实现实时获取后台匹配数据并展示。

摘要由CSDN通过智能技术生成

今天接到一个需求，说是要把一个input框的搜索即时匹配,效果图如下:

随着输入框的不断输入,会不断向后台发送请求,并将输入框内的value作为请求的参数,后台会根据参数返回与value最为匹配的数据,今天不讲原理,只跟大家分享最快的解决方法(此方法是基于antd的ui框架)

1,第一步要安装antd

npm install antd --save

2，要用到Autocomplete，Input,message.三个组件

具体代码：

const AutoCompleteOption=AutoComplete.Option
const [nameList,setNameList]=useState([])
const nameSearchList=(value)=>{
    xxx({
         name:value//xxx代表你封装的请求方法
    }).then((res)=>{
         if(res.stat === 'ok'){
             setNameList(res.data)
         }else{
             message.error(res.msg)
         }
    }).catch(err=>{
//之所以要加catch是因为输入不符合规范的名称时；就会报错
//而且页面直接崩溃，所以要catch一下,我封装的是fetch方法，
//我之前看过一篇文章，好像说fetch是不能自动catch错误的&