How to use JS to write a similar to the Baidu input box search plugin

PS: This time do this small plug-in is only implemented in the front end, and did not go through the database. Required frame: 1.bootstrap.css style 2.vue.js

The final effect is as follows:

JS section:

$ (window). Click (function () {
content_data.is_selected = ' N ';
});
var content_data = {
Blog_classify: ",//Category search box
Classify_data: [//All categories
{name: "Pet Skill Development"},
{Name: "Pet Health Education"},
{Name: "Story Chat"},
{Name: "Pet Gallery"},
{Name: "Pet Knowledge Quiz"},
{name: "Pet Joke"},
],
Classify_new: [],//Search box options
is_selected: ' N '//determine if the element inside the search box has been clicked
};

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

Where blog_classify is the V-model attribute to be declared inside the input box. When the value of the Blog_classify property changes, the corresponding method in watch is automatically called.
My idea: The data in the classify_data[] is all traversed, using the IndexOf method to determine whether the input keyword exists in classify_data[],
If it exists, add it to classify_new[], and finally create a list of options in HTML with v-for to display in the foreground.

Front Code:

<div class= "Form-group" style= "margin-bottom:0;" >
    <label class= "Control-label" > Categories:</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>

It's just a personal idea that doesn't refer to the answers of others. After writing, found that Baidu inside seems to have not used vue.js to do a similar thing, simply write to Exchange. It's just a simple notation,
Shortage of places to hope that the big guys communicate in a more optimized way.

How to use JS to write a similar to the Baidu input box search plugin