怎么用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>

　　这只是个人的一个想法，没有参照其他人的答案。后面写完之后发现百度里面好像还没有用Vue.js做类似的一个东西，就简单写来交流一下。这只是一个简单的写法，
不足的地方希望各位大佬交流更优化的方式。