Javascript 如何在建议selectize.js中禁用自动选择?

Javascript 如何在建议selectize.js中禁用自动选择?,javascript,jquery,selectize.js,Javascript,Jquery,Selectize.js,我想用algolia实现自动完成搜索,一切正常。algolia autocomplete使用selectize.js插件显示表单和下拉列表,但问题是如果我单击输入框,它会显示建议,并选择其中一个建议,因此如果我不键入任何内容就按enter键,它会自动选择第一个建议。我想要的是,如果我键入一个单词或将其留空,然后按enter键,则不应选择任何建议。我怎样才能解决这个问题?任何帮助都将不胜感激 const autocomplete = instantsearch.connectors.connect

我想用algolia实现自动完成搜索,一切正常。algolia autocomplete使用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);
});
}
);
]);
const autocomplete=instantsearch.connectors.connectAutocomplete(
({index,refine,widgetParams},isFirstRendering)=>{
const{container,onSelectChange}=widgetParams;
如果(isFirstRendering){
container.html(“”);
container.find('select')。selectize({
选项:[],
valueField:'id',
拉贝尔菲尔德:“名字”,
推荐理由:没错,
onType:refine,
onBlur(){
细化(this.getValue());
},
分数(){
返回函数(){
返回1;
};
},
onChange(值){
改变(价值);
提炼(价值);
},
});
返回;
}
const[select]=container.find('select');
index.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);
        }
 })
片段:

/*全局$instantsearch算法搜索*/
const searchClient=algoliasearch(
‘B1G2GM9NG0’,
“aadef574be1f9252bb48d4ea09b5cfe5”
);
常量自动完成=instantsearch.connectors.connectAutocomplete(
({index,refine,widgetParams},isFirstRendering)=>{
const{container,onSelectChange}=widgetParams;
如果(isFirstRendering){
container.html(“”);
container.find('select')。selectize({
选项:[],
valueField:'名称',
拉贝尔菲尔德:“名字”,
推荐理由:错,
onType:refine,
onBlur(){
细化(this.getValue());
},
分数(){
返回函数(){
返回1;
};
},
onChange(值){
改变(价值);
提炼(价值);
},
});
返回;
};
$(文档)。在('keydown','[type=“select one”]',函数(e)上{
如果(e.which==13){
选择。选择。清除(true);
}
})
const[select]=container.find('select');
index.forEach(index=>{
select.selectize.clearOptions();
index.results.hits.forEach(h=>select.selectize.addOption(h));
select.selectize.refreshOptions(select.selectize.isOpen);
});
}
);
常量搜索=实例搜索({
indexName:“演示电子商务”,
searchClient,
});
search.addWidgets([
instantsearch.widgets.configure({
命中率:10,
}),
instantsearch.widgets.hits({
容器:“#命中”,
模板:{
项目:`
{{{#helpers.highlight}{“属性”:“名称”}{{{/helpers.highlight}

{{{#helpers.highlight}{“属性”:“说明”}{{{/helpers.highlight}

`, }, }), ]); 常量建议=实例搜索({ indexName:“演示电子商务”, searchClient, }); 建议.addWidgets([ instantsearch.widgets.configure({ 命中率:5, }), 自动完成({ 容器:$(“#自动完成”), onSelectChange(值){ search.helper.setQuery(value.search(); }, }), ]); 建议。开始(); search.start()
h1{
边缘底部:1rem;
}
em{
背景:青色;
字体风格:普通;
}
.集装箱{
最大宽度:960像素;
保证金:0自动;
填充:1em;
}
.ais点击率{
边缘顶部:1米;
}
.点击名称{
边缘底部:0.5em;
}
.点击描述{
颜色:#888;
字体大小:14px;
边缘底部:0.5em;
}

InstantSearch.js-带有自动完成功能的结果页面

谢谢你的回答,但我想保留输入。到目前为止,如果我键入建议列表中的单词,它将被清除,但如果该单词不在建议列表中,它将保留在建议列表中,我如何保留键入的单词并仅避免自动选择@Gaetanomok是这样的,我想做的是,假设我有5种产品,它们都被命名为
女鞋
,我想搜索女鞋,因此如果我键入女鞋并按enter键,我希望它重定向到
搜索页面
,该查询将显示所有名为女鞋的产品。这就是为什么我想保留键入的单词和空白。我只是想避免自动选择@GaetanomThank谢谢你的帮助@Gaetanomn你明白了吗@gaetanoM这是一个很好的例子,我尝试了所有的方法,但都没有效果,也没有下拉菜单,除了这个,如果我使用这个例子,与我的@gaetanoM代码相比,会很复杂