Instantsearch.js是否提交隐藏搜索

Question

问题：

默认情况下，在instantsearch.js中，搜索字段中的重置按钮是隐藏的，直到您开始键入为止。但是提交按钮没有隐藏，导致它们重叠，这似乎是默认行为(？(

以下是演示该问题的演示：https://codesandbox.io/s/quizzical-leakey-7shzr

预期结果：

我希望搜索提交按钮在键入时用重置按钮替换(切换(。

我尝试过的东西：

我查阅了文档，找不到任何解决方案。有一个showReset和showSubmit参数，如下所示：https://www.algolia.com/doc/api-reference/widgets/search-box/js/但这些只是使它们完全失效。

在小部件中为它们更改模板，只是对它们进行样式化，而不是调整它们的功能。

我在下面用jquery编写了一个严厉的解决方案，但我的问题是：有没有办法在instantsearch.js中配置这种行为？

$( ".ais-SearchBox-input" ).on("keyup", function() {
if($('.ais-SearchBox-input').val().length > 0){
$('.ais-SearchBox-submit').addClass('none');
}else{
$('.ais-SearchBox-submit').removeClass('none');     
}
});
$(document).on('click', '.ais-SearchBox-reset', function() {
$('.ais-SearchBox-submit').removeClass('none');     
});

Answer 1

submit按钮最初设计在搜索框的左侧，reset按钮在右侧，如您在InstantSearch.jsSearchBoxStorybook中所见。在您的演示中，有一个自定义的CSS将它们在右边对齐，这就是它们重叠的原因。但它们是两个正交的概念，所以它们并不是为了开箱即用地相互替换而设计的。

您的解决方案很好，尽管我知道在InstantSearch.js之上使用这样的命令式逻辑可能会让人觉得恶心。另一种方法是使用connectSearchBox连接器直接挂接到小部件的呈现逻辑中。您将能够完全控制渲染的内容，并且可以访问query，您可以利用它来决定是显示一个按钮还是显示另一个按钮。

我的建议是从完整的示例开始，并根据您的用例进行调整。