How to implement search box in vuejs

How to implement the search box in vuejs: 1. Create components of the logo and search box parts; 2. Create a new empty Vue object; 3. Use "bus.$emit("change",index);" Just trigger the event and pass parameters.

The operating environment of this article: Windows 7 system, vue version 2.9.6, DELL G3 computer.

How to implement the search box in vuejs?

Implementing a simple search box based on Vue.js

I saw the exercises on github. After reading the code, practice it again yourself. Put the original address first. : https://github.com/lavyun/vue-demo-search

The main knowledge used is very simple, simple knowledge of vuejs2.0 is enough. The source code uses .vue to build and ES6, webpack packaging and so on. I am still relatively inexperienced, so I will first use a simple .js to write.

Look at the effect first

There are two components here, one component is the logo part and the other is the search box part.

html

html is very simple, just refer to two components.

<p id="app">
 <logo-picture></logo-picture>
 <search-panel></search-panel>
</p>

//js还要实例#app
var app = new Vue({
 el: "#app"
})

logo

Let’s analyze it first. First, an displays the image of the search engine. It should be responsive here. If you choose different search engine icons below, you will need to change them accordingly. So . When clicked on the back inverted triangle, the drop-down list will be displayed.
Then there is the drop-down box. If you want to have a transition effect, you need to wrap it in a If you want to have a hover effect, use data-driven thinking, which is to compare whether index and hoverindex are equal, and if they are equal, add class.

Vue.component('logo-picture',{
 template :' \
 <p class="main-logo">\
 <img  src="/static/imghwm/default1.png"  data-src="items[now].src"  class="lazy"  : @click="toggleFlag"/ alt="How to implement search box in vuejs" >\
 <span @click="toggleFlag" class="logoList-arrow"> </span>\
 <transition-group tag="ul" v-show="flagShow" class="logoList">\
 <li v-for="(item,index) in items" :key="index" @click="changeFlag(index)" @mouseover="flagHover(index)" :class="{selectback: index == hoverindex}">\
 <img  src="/static/imghwm/default1.png"  data-src="item.src"  class="lazy"  : / alt="How to implement search box in vuejs" >\
 </li>\
 </transition>\
 </p>&#39;,
 data: function() {
 return {
 items: [{src:&#39;../src/assets/360_logo.png&#39;},{src:&#39;../src/assets/baidu_logo.png&#39;},{src:&#39;../src/assets/sougou_logo.png&#39;}],
 now: 0,
 flagShow: false,
 hoverindex: -1 
 }
 },
 methods: {
 //显示隐藏图片列表
 toggleFlag: function() {
 this.flagShow = !this.flagShow;
 },
 //改变搜索引擎
 changeFlag: function(index) {
 this.now = index;
 this.flagShow = false;
 bus.$emit("change",index);
 },
 //li hover
 flagHover: function(index) {
 this.hoverindex = index;
 }  
 }
});

Drop-down box

Input needs to be bound in two directions, so v-model="keyword" must be bound, and keyboard events must be bound. @keyup, if you press enter, you will search, and if you go down or up, you will select the given return information list.
The details box below is similar to the drop-down list.
If you search, you mainly use $http.jsonp, and also use ES6 syntax? The fallback seems to be Promise's .then().

Vue.component('search-panel',{
 template:'\
 <p class="search-input">\
 <input v-model="search" @keyup="get($event)" @keydown.enter="searchInput()" @keydown.down="selectDown()" @keydown.up.prevent="selectUp()"/>\
 <span @click="clearInput()" class="search-reset">&times;</span>\
 <button @click="searchInput()" class="search-btn">搜一下</button>\
 <p class="search-select">\
 <transition-group tag="ul" mode="out-in">\
 <li v-for="(value,index) in myData" :class="{selectback:index==now}" :key="index" @click="searchThis" @mouseover="selectHover(index)" class="search-select-option search-select-list">\
  {{value}}\
 </li>\
 </transition-group>\
 </p>\
 </p>&#39;,
 data: function() {
 return {
 search: &#39;&#39;,
 myData: [],
 flag: 0,
 now: -1,
 logoData: [
 {
  &#39;name&#39;: "360搜索",
  searchSrc: "https://www.so.com/s?ie=utf-8&shb=1&src=360sou_newhome&q="
 },
 {
  &#39;name&#39;: "百度搜索",
  searchSrc: "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd="
 },
 {
  &#39;name&#39;: "搜狗搜索",
  searchSrc: "https://www.sogou.com/web?query="
 }
 ]
 }
 },
 methods: {
 get: function(event) {
 if(event.keyCode == 38 || event.keyCode == 40){ //向上向下
 return ;
 }
 this.$http.jsonp(&#39;https://sug.so.360.cn/suggest?word=&#39; + this.search + &#39;&encodein=utf-8&encodeout=utf-8&#39;).then(function(res) {
 this.myData = res.data.s;

 }, function() {

 });
 },
 //清除内容
 clearInput: function() {
 this.search = &#39;&#39;;
 this.get();
 },
 //搜索
 searchInput: function() {
 alert(this.flag)
 window.open(this.logoData[this.flag].searchSrc+this.search);
 },
 //搜索的内容
 searchThis: function(index) {
 this.search = this.myData[index];
 this.searchInput();
 },
 //li hover
 selectHover: function(index) {
 this.search = this.myData[index];
 this.now = index;
 },
 //向下
 selectDown: function() {
 this.now++;
 if(this.now == this.myData.length) {
 this.now = 0;
 }
 this.search = this.myData[this.now];
 },
 //向上
 selectUp: function() {
 this.now--;
 if(this.now == -1) {
 this.now = this.myData.length - 1;
 }
 this.search = this.myData[this.now];
 }
 },
 created: function() { //通信
 var self = this;
 bus.$on(&#39;change&#39;,function(index) {
 self.flag = index;
 })
 }
})

The problem of communication between two brother components

If you change the search engine, should be replaced with the corresponding search engine. Here we need to create a new empty Vue object as the middle, because the two components are not in a parent-child relationship.

var bus = new Vue();

//logo-picture里触发事件，并传递参数
bus.$emit("change",index);

//search-panel里监听事件是否发生
var self = this;
bus.$on('change',function(index) {
 self.flag = index;
})

Pay attention to this problem here. This in $on points to bus, so you must save this to reference search-panel.

Recommended learning: "vue tutorial"

The above is the detailed content of How to implement search box in vuejs. For more information, please follow other related articles on the PHP Chinese website!