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

Question

我正在尝试使用 algolia 实现自动完成搜索，一切正常。 algolia 自动完成使用 selectize.js 插件来显示表单和下拉列表，但问题是如果我单击输入框，它会显示建议并选择其中一个建议所以如果我在没有输入任何内容的情况下按 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);
        }
 })

片段：

 /* 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>