2017-01-24 5 views
0

Mein Ziel: Um in der Lage sein die automatische Vervollständigung mit mehreren Werten von einer entfernten Quelle zu bekommenautomatische Vervollständigung mit mehreren Werten Datenfern mit

Mein Stack: AngularJS für Front-End, Awesomplete und Knoten für Backend

kann ich die Beispiele in der Awesomplete Dokumentation finden:

  1. zur automatischen Vervollständigung Multiple-Wert basiert auf einer lokalen Datenliste
  2. die Daten von Remote-URL abrufen und verwenden es ist Antwort für Auto-complete

Mein Problem: ich sie nicht scheinen, zu kombinieren beides zu tun.

Von der awesomplete Dokumentation:

Mehrwert Auto-complete:

<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 + ", "; 
} 
}) 

Und Ajax Beispiel:

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

Was ich bin, nachdem sie in der Lage sein wird Ich habe mehrere Keywords mit Autovervollständigung, aber basierend auf einer Remote-Antwort, die ich kämpfe zu tun. Ich bin hauptsächlich ein Back-End-Entwickler und daher ist mein Verständnis des Front-Ends nicht sehr groß, wie Sie bereits erraten können.

Vielen Dank im Voraus

Antwort

0

Am Ende ging ich mit angucomplete aber das hat noch keine Lösung für die Mehrwertsuche hat.

Allerdings habe ich festgestellt, dass das Awesomplete Ajax-Beispiel die Daten von einer URL heruntergezogen bekommt und Sie es dann über das Front-End mit der Suche filtern. Das ist keine richtige Lösung, da Sie so viele unnötige Daten in Ihrem Browser haben werden. Angucomplete hingegen fügte der URL den Textwert hinzu, sodass Sie ihn als Abfrageparameter verwenden konnten.

Also was ich getan habe, war das AnguComplete Angular Modul zu öffnen und es zu modifizieren. Sieht nicht so aus als gäbe es eine Lösung, also musste ich von Grund auf neu erstellen, um die Multi-Value-Unterstützung zu unterstützen.

Verwandte Themen