Vue.component('search',{ template: ` `, data: function() { return{ searchtext: "", selected: [], taglist: data, }; }, computed:{ filteredDataArray() { return this.taglist.filter((option) => { return option .toString() .toLowerCase() .indexOf(this.searchtext.toLowerCase()) >= 0 }) } }, methods: { getFilteredTags(text) { this.taglist = data.filter((option) => { return option .toString() .toLowerCase() .indexOf(text.toLowerCase()) >= 0 }) this.search(); }, search: function() { searching(this.searchtext); }, saveTagsToArray: function() { tagArray = this.selected; // console.info(tagArray); }, list_messages: function() { messages(); }, list_tags: function () { $.ajax({url: "api/tag/ids", method: "GET"}) .done(jd => { // NICHT SO wg. Vue: _messagelist = jd; if(data == ""){ _taglist.splice(0, _taglist.length); _taglist.push.apply(_taglist, jd); // console.log("tag: jd: " + jd); for (var e in jd) { if (!_tags[jd[e]]) { get_insert_tag(jd[e]); } } } }).fail(function (e, f, g) { console.log("err: " + e + f + g); }); }, clear: function() { //_isSearchActiv = false; this.searchtext = ""; this.list_messages(); //router.push('/files') //router.push('/home') $("#escape-search-link").css("visibility", "hidden"); $("#subscribe-btn").css("visibility", "hidden"); }, }, mounted: function() { //this.search(); this.list_tags(); }, }); // Global Functions !!! function get_insert_tag(id) { $.ajax({ url: "api/tag/id/" + id, method: "GET" }).done(function(tag) { data.push("#" + tag.name); }).fail(function(e, f, g) { console.log("cannot load " + id + ".json: " + e + f + g); }) } function searching(searchtext) { _isSearchActiv = true; $("#escape-search-link").css("visibility", "visible"); //console.log(_tags); console.log(data); if(data.indexOf(searchtext) > -1){ var btnString = "#" + searchtext.replace(/#/g, '') + " abonnieren"; $("#btn-text").text(btnString); $("#subscribe-btn").css("visibility", "visible"); }else{ $("#subscribe-btn").css("visibility", "hidden"); } $.ajax({ url: "api/msg/search/" + searchtext.replace(/#/g, ''), method: "GET" }).done(jd => { // NICHT SO wg. Vue: _messagelist = jd; _messagelist.splice(0, _messagelist.length); _messagelist.push.apply(_messagelist, jd); //console.log("jd: "+jd); for (var e in jd) { if (!_messages[jd[e]]) { get_insert_message(jd[e]); } } }).fail(function(e, f, g) { console.log("searching: err: " + e + f + g); }) } function messages() { $.ajax({ url: "api/msg/ids", method: "GET" }) .done(jd => { // NICHT SO wg. Vue: _messagelist = jd; _messagelist.splice(0, _messagelist.length); _messagelist.push.apply(_messagelist, jd); //console.log("jd: "+jd); for (var e in jd) { if (!_messages[jd[e]]) { get_insert_message(jd[e]); } } }).fail(function(e, f, g) { console.log("list_msg: err: " + e + f + g); }); }