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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.