自動填充與使用遠程數據的多個值

我的目的：爲了能夠從遠程源獲得具有多個值的自動填充自動填充與使用遠程數據的多個值

我的堆棧： AngularJS爲前端，Awesomplete和節點對後端

我能找到的Awesomplete文檔中的例子：基於本地數據一覽上

多值自動完成
充分利用遠程URL中的數據，並使用它的響應爲自動completetion

我的問題：我似乎無法將它們結合起來，一舉兩得。

從awesomplete文檔：

多值自動completetion：

<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();

我所追求的是能夠有多個關鍵字autocompletion，但基於遠程響應，我很掙扎要做。我大多是後端開發人員，所以我對前端的瞭解並不是很大，正如您已經猜到的那樣。

在此先感謝

來源

2017-01-24 Shayan Khan

最後，我去angucomplete但仍然沒有爲多值搜索的解決方案。

但是，我意識到Awesomplete Ajax示例從URL中獲取數據，然後通過搜索將其過濾到前端。這不是一個適當的解決方案，因爲你的瀏覽器上會有太多不必要的數據。另一方面，Angucomplete將文本值附加到URL，以便您可以將其用作查詢參數。

所以我所做的就是打開angucomplete Angular模塊並對其進行修改。看起來不像有解決方案，所以我必須從頭開始創建，以支持多值支持。

來源

2017-01-24 15:38:08

自動填充與使用遠程數據的多個值

回答

相關問題