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

Question

我正在尝试使用 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);
});
}
);
]);

Answer 1

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

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

sn-p：

/* 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', '[type="select-one"]', 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',
    searchClient,
});

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>