有没有一种方法可以根据按键事件以编程方式触发自动完成功能?

时间:2020-10-28 17:32:37

标签: reactjs autocomplete material-ui rendering

我们正在尝试使用自动完成组件来使我们的用户能够搜索应用程序的一些功能。 目前已将其配置为使用freeSolo,并且一些输入处理程序使用onChange,onInputChange等,并且在输入字符时按预期提取了结果。

从先前的应用转换过来后,用户可以点击搜索按钮以异步获取结果,我们希望在按下时支持“ enter”键,应该获取结果并进行渲染。

但是,如果结果尚未呈现(例如,当搜索输入由于“逃逸”事件或“标签”或其他类似情况)。

代码沙箱-https://codesandbox.io/s/material-demo-forked-xpjvv?file=/demo.js 在上面的代码片段中添加了注释,以引用我们在Enter事件处理程序中面临的确切问题。在下面的文档中找不到合适的API来呈现结果 https://material-ui.com/api/autocomplete/

1 个答案:

答案 0 :(得分:0)

每个自动填充组件都具有以下问题:

  1. 保持输入值onChange。就像你所做的一样。
  2. onKeyPress上使用油门或反跳,根据用户输入显示一些建议,以避免重复调用API端点,而这可能会花费很大。
  3. 显示最终结果,或将用户重定向到search上的enter页,或者单击每个呈现的建议​​,表明您已经完成了这一部分。