Algolia：自定义搜索框和 Clearall答案

【问题标题】：Algolia: Custom Searchbox and ClearallAlgolia：自定义搜索框和 Clearall
【发布时间】：2018-02-23 23:02:54
【问题描述】：

我将 Algolia 和 Instantsearch.js 用于我的一个项目。

我设法让自定义搜索框工作。在 JS 中，我创建了一个输入字段并将其设置为看起来不错的样式：

// searchbox design
var searchField = '<div class="input-search">';
searchField += '<i class="input-search-icon wb-search" aria-hidden="true"></i>';
searchField += '<input type="text" class="form-control" id="customerSearch" name="search" placeholder="Search for customer..">';
searchField += '<span id="custom-clear-all-container"></span>';
searchField += '</div>';

// custom `renderFn` to render the custom SearchBox widget
function renderFnSB(SearchBoxRenderingOptions, isFirstRendering) {
    if (isFirstRendering) {
        SearchBoxRenderingOptions.widgetParams.containerNode.html(searchField);
        SearchBoxRenderingOptions.widgetParams.containerNode
            .find('input')
            .on('keyup', function() {
                SearchBoxRenderingOptions.refine($(this).val());
            });
        SearchBoxRenderingOptions.widgetParams.containerNode
            .find('input')
            .val(SearchBoxRenderingOptions.query);
    }
}

// connect `renderFn` to SearchBox logic
var customSearchBox = instantsearch.connectors.connectSearchBox(renderFnSB);

// mount widget on the page
search.addWidget(
    customSearchBox({
        containerNode: $('#custom-searchbox')
    })
);

上面的代码与 Algolia 文档中的代码示例几乎相同。我刚刚在 DOM 中添加了一个 id="custom-searchbox" 的“div”。这工作得很好。

然后我尝试创建一个自定义清除所有按钮并将其附加到：

<span id="custom-clear-all-container"></span>

在搜索框内。我再次使用与 Algolia 文档几乎相同的代码：

function renderFnCA(ClearAllRenderingOptions, isFirstRendering) {
    var containerNode = ClearAllRenderingOptions.widgetParams.containerNode;

    if (isFirstRendering) {
        var markup = $('<button id="custom-clear-all" type="button" class="input-search-close icon wb-close" aria-label="Close"></button>');
        containerNode.append(markup);

        markup.on('click', function(event) {
            event.preventDefault();
            ClearAllRenderingOptions.refine();
        })
    }

    var clearAllCTA = containerNode.find('#custom-clear-all');
    clearAllCTA.attr('disabled', !ClearAllRenderingOptions.hasRefinements)
};

// connect `renderFn` to ClearAll logic
var customClearAllWidget = instantsearch.connectors.connectClearAll(renderFnCA);

// mount widget on the page
search.addWidget(
    customClearAllWidget({
        containerNode: $('#custom-clear-all-container'),
        clearsQuery: true
    })
);

当我运行代码时，一切正常，但我没有看到 clearAll 按钮（在我的例子中是一个 X 图标）。

如果我插入：

<span id="custom-clear-all-container"></span>

直接转成HTML，从JS中去掉，就完美了。

我不知道出了什么问题。顺便说一句，添加 clearAll 的代码在添加搜索框的代码之后。因此，当我们尝试附加 clearAll 按钮时，搜索框 DOM 元素已经放置在 DOM 中。

任何想法为什么会发生这种情况？

提前致谢！

【问题讨论】：

标签： javascript html dom algolia

【解决方案1】：

您可能希望将按钮留在 dom 中，而不是完全删除它 $('#custom-clear-all').hide() 它。

algolia 搜索小部件可能一直在寻找按钮，当它在 dom 中找不到时它不会运行

【讨论】：

我通过直接在 DOM 中添加“#custom-clear-all-container”跨度并附加 clearAll 按钮来修复它。同时我使用“prepend”而不是“html”在“#custom-searchbox”中插入输入字段。