如何在MaterializeCSS的autocomplete组件中使用selectOption()方法
MaterializeCSS Autocomplete 如何编程式选中指定选项
页面加载时我想要给自动完成组件初始化选中一个指定选项,我使用的是MaterializeCSS,官方文档说明如下:
选中指定的自动完成选项
参数
Element:自动完成选项对应的DOM元素
调用方式:instance.selectOption(el);
我尝试了以下写法:
//autocomplete.selectOption("Radek") //autocomplete.selectOption({"Radek"}) autocomplete.selectOption({"Radek":null})
但都没有生效。请问如何才能编程式选中自动完成组件的选项?
我的完整初始化代码如下:
var elemOptions = { data: { "Radek Surname ": null, "Radek": null, "Radoslav": null }, minLength : 2, } var elemAutomplete = document.getElementById('autocomplete-input1') var autocomplete = M.Autocomplete.init(elemAutomplete, elemOptions); //autocomplete.selectOption("Radek") //autocomplete.selectOption({"Radek"}) autocomplete.selectOption({"Radek":null})
解决方案
你调用selectOption不生效的核心原因是该方法要求传入的参数为自动完成下拉列表中对应选项的DOM元素,而非选项文本或数据对象,你之前传参的格式和官方要求不符。
如果仅需要初始化时默认填充指定选项值,不需要触发选中相关的回调,直接给输入框赋值即可,代码如下:
// 初始化完成后直接给输入框赋值 elemAutomplete.value = "Radek";
如果需要触发选中选项后的内置回调逻辑,才需要调用selectOption方法,此时需要先构造符合要求的DOM元素再传入:
// 构造符合autocomplete要求的选项DOM const optionEl = document.createElement('li'); optionEl.classList.add('autocomplete-item'); optionEl.textContent = 'Radek'; // 调用方法触发选中逻辑 autocomplete.selectOption(optionEl);
内容的提问来源于stack exchange,提问作者Radek
相关产品推荐
相关产品推荐

