要使用Awesomplete作为多个值的自动建议分隔符,可以按照以下步骤进行:
var input = document.getElementById("my-input");
var awesomplete = new Awesomplete(input);
input.addEventListener("keydown", function(event) {
if (event.keyCode === 32) { // 按下空格键
var value = this.value.trim(); // 获取输入字段的值并去除首尾空格
if (value !== "") {
awesomplete.evaluate(); // 重新计算建议列表
awesomplete.open(); // 打开建议列表
}
}
});
awesomplete.ul.addEventListener("click", function(event) {
var selectedValue = awesomplete.selectedItem.label; // 获取选择的建议项的标签
var inputValue = input.value.trim(); // 获取输入字段的值并去除首尾空格
var values = inputValue.split(" "); // 将输入字段的值按空格分隔成多个值
values.pop(); // 移除最后一个值,因为它是当前正在输入的值
values.push(selectedValue); // 将选择的建议项的值添加到数组中
input.value = values.join(" ") + " "; // 将多个值合并成一个字符串,并在末尾添加一个空格
});
这样,当用户在输入字段中输入一个值并按下空格键时,Awesomplete会重新计算建议列表,并将用户选择的建议项添加到输入字段中作为一个新的值。