如何使用Material ui自动完成功能进行搜索?

时间:2020-04-19 15:45:15

标签: javascript reactjs typescript event-handling material-ui

我正在寻找material-ui-search-bar的替代方案,因为它没有得到维护。建议我使用Material ui的自动完成功能。但是,在我所看到的示例中,我只能看到可以键入的类似结构的文本字段。然后,当我们打字时会有一个十字按钮。

在此自动完成字段中是否可以有一个搜索按钮或其他可以使用事件处理程序的内容?我想在此字段中点击搜索按钮,并在输入完毕后调用事件处理程序。

代码沙箱:

https://codesandbox.io/s/d07uv?file=/demo.js

1 个答案:

答案 0 :(得分:1)

当然可以。正如您提到的,我为您的第一个文本字段添加了一个事件处理程序。为此,我使用了搜索按钮。搜索和电影选择完成后,您可以单击搜索按钮。然后调用事件处理程序,您可以在事件处理功能中查看所选的影片名称及其索引(请看控制台)。希望会有所帮助:)

这是沙箱链接: https://codesandbox.io/s/a125-material-ui-search-fhgd6