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 6ed09268cbdd0015bce8dcbbdfa9bfe4 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 e431342b2894783f54b33740f33c93c1. When clicked on the back inverted triangle, the drop-down list914942ce123cf770f7ea92723ad87555 54bdf357c58b8a65c66d7c19c8e4d114 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 c3e625f0b40cba3211ed115e2114d554 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

fd098b03a0046905b4f34a14f2cba3c4If you change the search engine, 04a43090e6cbf1462a77fdb864c1f813 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!