Question

我的目标：能够使用远程来源的多个值自动完成

我的堆栈： AngularJS用于前端，Awesomplete和Node用于后端

我可以在Awesomplete文档中找到以下示例：

基于本地数据列表的多值自动完成
从远程URL获取数据并使用其自动完成响应

我的问题：我似乎无法将它们结合起来做两件事。

来自完整的文档：

多值自动完成：

<input data-list="CSS, JavaScript, HTML, SVG, ARIA, MathML" data-multiple />

new Awesomplete('input[data-multiple]', {
filter: function(text, input) {
    return Awesomplete.FILTER_CONTAINS(text, input.match(/[^,]*$/)[0]);
},

replace: function(text) {
    var before = this.input.value.match(/^.+,\s*|/)[0];
    this.input.value = before + text + ", ";
}
})

和Ajax示例：

var ajax = new XMLHttpRequest();
ajax.open("GET", "https://restcountries.eu/rest/v1/lang/fr", true);
ajax.onload = function() {
    var list = JSON.parse(ajax.responseText).map(function(i) { return i.name; });
new Awesomplete(document.querySelector("#ajax-example input"),{ list: list });
};
ajax.send();

我所追求的是能够拥有多个关键字自动完成但基于远程响应，我正在努力做到这一点。我主要是一个后端开发人员，所以我对前端的理解并不是很大，正如你已经猜到的那样。

提前致谢

Answer 1

最后，我选择angucomplete，但仍然没有针对多值搜索的解决方案。

但是，我意识到Awesomplete Ajax示例从下拉的URL中获取数据，然后通过搜索前端对其进行过滤。这不是一个合适的解决方案，因为您的浏览器上会有如此多的不必要数据。另一方面，Angucomplete将文本值附加到URL，以便您可以将其用作查询参数。

所以我所做的是打开angucomplete Angular模块并对其进行修改。看起来没有解决方案，所以我必须从头开始创建以支持多值支持。

使用远程数据自动完成多个值

1 个答案: