How can I disable automatic selection in one of the suggestion selectize.js?

user_11710915 0
Viewed 637

I'm trying to implement autocomplete search using algolia, everything works.The algolia autocomplete uses selectize.js plugin to display a form and the dropdown but the problem is if I click the input box it shows the suggestions with one of the suggestions being selected so if I hit enter without typing anything it will automatic choose the first suggestion. What I want is if I type a word or leave it empty and press enter it shouldn't select any of the suggestion. How can I fix this? Any help would be appreciated.

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);
});
}
);
]);
selectize.js jquery javascript
1 Answers

You can add the folowing event handler in order to clear selected items if a return is pressed:

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

The snippet:

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

user_38805850
Related