如何在建议selectize.js之一中禁用自动选择？

问题描述

我正在尝试使用algolia实现自动完成搜索，一切正常.algolia自动完成使用selectize.js插件显示表单和下拉列表，但问题是如果我单击输入框，它会显示带有以下内容之一的建议建议被选中，因此如果我按Enter键而不输入任何内容，它将自动选择第一个建议。我想要的是，如果我键入一个单词或将其保留为空，然后按Enter键，则不应选择任何建议。我怎样才能解决这个问题？任何帮助将不胜感激。

const autocomplete = instantsearch.connectors.connectAutocomplete(
({ indices,refine,widgetParams },isFirstRendering) => {
const { container,onSelectChange } = widgetParams;

if (isFirstRendering) {
  container.html('<select id="ais-autocomplete"></select>');

  container.find('select').selectize({
    options: [],valueField: 'id',labelField: 'name',highlight: true,onType: refine,onBlur() {
      refine(this.getValue());
    },score() {
      return function() {
        return 1;
      };
    },onChange(value) {
      onSelectChange(value);
      refine(value);
    },});

  return;
}

const [select] = container.find('select');

indices.forEach(index => {
  select.selectize.clearOptions();
  index.results.hits.forEach(h => select.selectize.addOption(h));
  select.selectize.refreshOptions(select.selectize.isOpen);
});
}
);
]);

解决方法

您可以添加以下事件处理程序，以便在按下返回键时清除所选项目：

 $(document).on('keydown','[type="select-one"]',function(e) {
        if (e.which == 13) {  // on return clear selections...
            select.selectize.clear(false);
        }
 })

摘要：

/* global $ instantsearch algoliasearch */

    const searchClient = algoliasearch(
            'B1G2GM9NG0','aadef574be1f9252bb48d4ea09b5cfe5'
    );

    const autocomplete = instantsearch.connectors.connectAutocomplete(
                    ({ indices,refine,widgetParams },isFirstRendering) => {
                const { container,onSelectChange } = widgetParams;

    if (isFirstRendering) {
        container.html('<select id="ais-autocomplete" muliple></select>');

        container.find('select').selectize({
            options: [],valueField: 'name',labelField: 'name',highlight: false,onType: refine,onBlur() {
            refine(this.getValue());
        },score() {
            return function() {
                return 1;
            };
        },onChange(value) {
            onSelectChange(value);
            refine(value);
        },});

    return;
};

$(document).on('keydown',function(e) {
    if (e.which == 13) {
        select.selectize.clear(true);
    }
})

const [select] = container.find('select');

indices.forEach(index => {
    select.selectize.clearOptions();
index.results.hits.forEach(h => select.selectize.addOption(h));
select.selectize.refreshOptions(select.selectize.isOpen);
});
}
);



const search = instantsearch({
    indexName: 'demo_ecommerce',searchClient,});

search.addWidgets([
    instantsearch.widgets.configure({
        hitsPerPage: 10,}),instantsearch.widgets.hits({
        container: '#hits',templates: {
            item: `
<div>
<header class="hit-name">
        {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
</header>
<p class="hit-description">
        {{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}
</p>
</div>
`,},]);

const suggestions = instantsearch({
    indexName: 'demo_ecommerce',});

suggestions.addWidgets([
    instantsearch.widgets.configure({
        hitsPerPage: 5,autocomplete({
        container: $('#autocomplete'),onSelectChange(value) {
        search.helper.setQuery(value).search();
},]);

suggestions.start();
search.start();

h1 {
    margin-bottom: 1rem;
}

em {
    background: cyan;
    font-style: normal;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 1em;
}

.ais-hits {
    margin-top: 1em;
}

.hit-name {
    margin-bottom: 0.5em;
}

.hit-description {
    color: #888;
    font-size: 14px;
    margin-bottom: 0.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.1.0/themes/algolia.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/selectize@0.12.6/dist/css/selectize.css">

<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/selectize@0.12.6/dist/js/standalone/selectize.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>

<div class="container">
    <h1>InstantSearch.js - Results page with an autocomplete</h1>
    <div id="autocomplete"></div>
    <div id="hits"></div>
</div>