如何在 React 和 Django Rest Framework 中实现自动完成用户搜索

Question

所以基本上我想在 react 中实现一个用户搜索系统，它会向我的 django 后端发送一个 api 请求，该后端会发回结果。如果我想在点击搜索后得到结果，但我希望结果显示为自动完成，这是一个简单的实现。例如，在 Twitter 中，它会自动完成您正在搜索的内容。我将如何实现这一点。如果有帮助，我将使用 axios 来处理我的请求。附带说明一下，我想在发送请求之前等待一两秒钟，因为我想发送许多请求并减慢服务器的速度。谢谢！

Answer 1

配方：任何 HTTP 客户端（带/不带可取消的 HTTP 客户端），谴责功能（lodash 有一个很好的），CSS 设计显示结果的套装。

这是基本思想 您创建了一个废弃函数并获取该函数的一个可以取消的实例，因此每次用户点击搜索栏时，我们都会取消对该函数的旧订阅并使用新的废弃超时重新订阅，当超时结束时，我们调用该函数点击 API 并获取响应（代表自动完成响应）以根据需要显示。

import React, { useState } from 'react';
import axios from 'axios';
import { debounce } from 'lodash';

let debouncedFunction: any;


function App() {

  const [inputValue, setInputValue] = useState('');

  const onSearchChange = (event: any) => {
    try {

      setInputValue(event.target.value);

      /**
       * cancel old saved debounced functions
       */
      if (debouncedFunction && debouncedFunction.cancel)
        debouncedFunction.cancel();

      debouncedFunction = debounce(async () => {

        // use event value if you want in request
        const response: any = await axios.get(
          'https://jsonplaceholder.typicode.com/todos/1' + `?test=${event.target.value}`
        );

        if (response.data) {
          console.log('autocomplete results...')
        }


      }, 2000);
      debouncedFunction();


    } catch (error) {
      console.error(error);
    }
  }

  return (
    <div >

      <input
        value={inputValue}
        onChange={onSearchChange}
        placeholder="Search with autocomplete..."
      />

    </div>
  );
}

export default App;

显示自动完成结果的其余部分留给您的应用显示更适合您的内容

这里是一个链接，可以根据需要下载和调整

https://github.com/lalosh/stackoverflow-autocomlete-example

抱歉，很忙。