怎麼用js寫一個相似於百度輸入框的搜索插件

PS：此次作的這個小插件只是在前端實現，並無通過數據庫。須要用到的的框架：1.bootstrap.css的樣式 2.Vue.js

最終效果以下：

JS部分：

$(window).click(function () {
    content_data.is_selected = 'N';
});
var content_data = {
    blog_classify: '',//分類搜索框
    classify_data: [//全部分類
        {name: "寵物技能培養"},
        {name: "寵物健康教育"},
        {name: "故事閒談"},
        {name: "寵物圖庫"},
        {name: "寵物知識競猜"},
        {name: "寵物笑話"},
    ],
    classify_new: [],//搜索框選項
    is_selected: 'N'//判斷搜索框裏面的元素有沒有被點擊
};

var content_el = new Vue({
    el: "#blog_el",
    data: content_data,
    watch: {
        blog_classify: function (value) {
            content_data.classify_new = [];
            if (content_data.is_selected === 'N') {
                for (var i = 0; i < content_data.classify_data.length; i++) {
                    if (content_data.classify_data[i].name.indexOf(value) !== -1) {
                        content_data.classify_new.push(content_data.classify_data[i].name)
                    }
                }
            }
        }
    },

其中，blog_classify是要在input框裏面聲明的v-model屬性。當blog_classify屬性的值發生變化時，會自動調用watch裏面對應的方法。
個人想法：把classify_data[]裏面的數據全都遍歷一遍，用indexof方法判斷輸入的關鍵字是否存在於classify_data[]中，
若是存在就添加到classify_new[]中，最後在html裏面用v-for生成可選項列表在在前臺展現。

前臺代碼：

<div class="form-group" style="margin-bottom: 0;">
    <label class="control-label">分類:</label>
    <input v-model="blog_classify" type="text" class="form-control" id="question-classify">
</div>
<div class="col-md-6" style="position: fixed;padding-left: 0">
    <div v-if="blog_classify.length>0" class="list-group"
         style="max-height: 100px;overflow: auto;">
        <a @click="classify_selected(statement)" href="javascript:void(0)"
           class="list-group-item" v-for="statement,index in classify_new">{{statement}}</a>
    </div>
</div>

前端主要是v-model和v-for這兩個屬性。v-model對blog_classify屬性進行雙向綁定，當blog_classify的值發生變化時，classify_new[]的數組內容也會動態改變。v-for會根據classify_new[]的內容動態改變列表的長度和
內容。

　　這只是我的的一個想法，沒有參照其餘人的答案。後面寫完以後發現百度裏面好像尚未用Vue.js作相似的一個東西，就簡單寫來交流一下。這只是一個簡單的寫法，
不足的地方但願各位大佬交流更優化的方式。