vue实现搜索框记录搜索历史_基于Vue.js实现简单搜索框

基于Vue.js实现简单搜索框

发布时间：2018-12-30 发布网站：编程之家

编程之家收集整理的这篇文章主要介绍了基于Vue.js实现简单搜索框，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

在github上看到的练习，看个遍代码后自己再练一遍，先放原址：

主要用到的知识很简单，简单的vuejs2.0的知识就够了。源码用了.vue构建和ES6，用了webpack打包等等。我资历还浅，先用一个简单的.js的写。

先看效果

这里有两个组件，一个组件是logo部分的，一个是搜索框部分的。

html

html很简单，就是引用两个组件。

//js还要实例#app

var app = new Vue({

el: "#app"

})

logo

先来分析，首先一个

显示搜索引擎的图片，这里要响应式的，下面选择了不同的搜索引擎图标就要跟着换。所以

。后面的倒三角点击时显示下拉列表。

然后是下拉框。如果想要有过渡效果，那个就要包裹在\

\

\

\',data: function() {

return {

items: [{src:'../src/assets/360_logo.png'},{src:'../src/assets/baidu_logo.png'},{src:'../src/assets/sougou_logo.png'}],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;

}

}

});

下拉框

input因为要双向绑定，所以要v-model="keyword"，还要绑定键盘事件@keyup，如果按enter就搜索，向下向上就选中给定的返回信息列表。

下面的详情框与下拉列表差不多。

搜索的话主要是运用$http.jsonp，还有ES6的语法？回掉好像是Promise的.then()。

\

\

\

\\',data: function() {

return {

search: '',myData: [],flag: 0,now: -1,logoData: [

{

'name': "360搜索",searchSrc: "https://www.so.com/s?ie=utf-8&shb=1&src=360sou_newhome&q="

},{

'name': "百度搜索",searchSrc: "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd="

},{

'name': "搜狗搜索",searchSrc: "https://www.sogou.com/web?query="

}

]

}

},methods: {

get: function(event) {

if(event.keyCode == 38 || event.keyCode == 40){ //向上向下

return ;

}

this.$http.jsonp('https://sug.so.360.cn/suggest?word=' + this.search + '&encodein=utf-8&encodeout=utf-8').then(function(res) {

this.myData = res.data.s;

},function() {

});

},//清除内容

clearInput: function() {

this.search = '';

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('change',function(index) {

self.flag = index;

})

}

})