Question

我正在将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文档中的代码示例相同。我刚刚添加了一个＆＃34; div＆＃34;在DOM中，id =＆＃34; custom-searchbox＆＃34;。这很好用。

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

<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中。

为什么会发生这种情况？

提前致谢！

Answer 1

您可能希望将按钮留在dom中，而不是完全删除它$（'＃custom-clear-all'）。隐藏（）而不是。

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

Algolia：自定义搜索框和Clearall

1 个答案: