om/public/search.js

Vue.component('search',{
    template: `
        <form class="om-searchbar" @submit.prevent="search()">
            <b-field>
                <b-autocomplete
                    v-model="searchtext"
                    @keydown.native.enter="search"
                    :data="filteredDataArray"
                    placeholder="suche..."
                    icon="magnify"
                    @reset-searchtext="resetSearchtext($event)"
                    @select="option => selected = option">
                </b-autocomplete>
                <button class="clearButton" @click="clear">x</button>
            </b-field>
        </form>`,
    data:  function() {
        return {
            searchtext: "",
            selected: [],
            taglist: data,
        };
    },
    computed:{
        filteredDataArray: function() {
            return this.taglist.filter((option) => {
                return option
                    .toString()
                    .toLowerCase()
                    .indexOf(this.searchtext.toLowerCase()) >= 0
            });
        },
    },
    methods: {
        resetSearchtext: function(param) {
            this.searchtext = param;
        },
        getFilteredTags: function(text) {
            this.taglist = data.filter((option) => {
            return option
                .toString()
                .toLowerCase()
                .indexOf(text.toLowerCase()) >= 0
            })
            this.search();
        },
        search: function() {
            var btnString = '';
            btnString = searching(this.searchtext, btnString);
            console.info(btnString);
            this.$emit('update-home-abo-button', btnString);
            vueForceRender('key');

        },
        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() {
			this.searchtext = "";
            this.list_messages();
			//router.push('/files')
			//router.push('/home')
            _isSearchActiv = false;
            _isSubscripeButtonActiv = false;
            this.$emit('toggle-escape-search-link');
            vueForceRender('key');
            console.info('done');
//			$("#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,btnString) {
    _isSearchActiv = true;
//	$("#escape-search-link").css("visibility", "visible");
    //console.log(_tags);
//    console.log(data);
	if(data.indexOf(searchtext) > -1){
		btnString = searchtext + " abonnieren";
//		$("#btn-text").text(btnString);
//		$("#subscribe-btn").css("visibility", "visible");
        _isSubscripeButtonActiv = true;
	}else{
//		$("#subscribe-btn").css("visibility", "hidden");
        _isSubscripeButtonActiv = false;
	}

    if (searchtext !== '') {
        $.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);
        })
    }
    return btnString;
}

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