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"
                    @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() {
            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() {
            console.log("clear");

            isSearchActiv = false;
            this.searchtext = "";
            this.list_messages();
        },
    },
    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;
    console.log("Searchtext: " + searchtext.replace(/#/g, ''));
    $.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);
        });
}