【问题标题】:Is there a way to trigger autocomplete programatically based on a keydown event?有没有办法根据 keydown 事件以编程方式触发自动完成?
【发布时间】:2021-02-11 03:19:45
【问题描述】:

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

从一个允许用户点击搜索按钮以异步获取结果的应用程序转换,我们预计支持“输入”键,在按下时,应该获取结果并呈现它们。

但是,如果结果尚未呈现(例如,当搜索输入因“Escape”事件或“ Tab' 或其他此类场景)。

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

【问题讨论】:

    标签: reactjs autocomplete material-ui rendering


    【解决方案1】:

    每个自动完成组件都有这些问题:

    1. 保持输入值onChange。和你做的一模一样。
    2. 根据用户输入在onKeyPress 上使用throttle 或 debounce 显示一些建议,以避免重复调用可能花费大量资金的 API 端点。
    3. 显示最终结果或将用户重定向到enter 上的search 页面,或单击每个呈现的建议​​,您已经完成了这部分。

    【讨论】:

    • 也许,我可能没有充分地提出我的问题。以编程方式在“自动完成”结果弹出窗口中显示结果是我正在寻找的。更新了描述以指向我们丢失的代码部分
    猜你喜欢
    • 2013-09-16
    • 1970-01-01
    • 2013-02-12
    • 2015-04-04
    • 1970-01-01
    • 2021-09-26
    • 1970-01-01
    • 2018-06-01
    • 1970-01-01
    相关资源
    最近更新 更多