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