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


Posted in Javascript onMarch 26, 2020

在github上看到的练习,看个遍代码后自己再练一遍,先放原址:https://github.com/lavyun/vue-demo-search

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

先看效果

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

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

html

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

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

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

logo

先来分析,首先一个<img />显示搜索引擎的图片,这里要响应式的,下面选择了不同的搜索引擎图标就要跟着换。所以<img :src="items[now].src" />。后面的倒三角点击时显示下拉列表<span @click="toggleFlag"> </span>。
然后是下拉框。如果想要有过渡效果,那个就要包裹在<transition-group中,然后遍历li,记住元素要指定唯一的key。
想要有hover效果的话,用数据驱动的思维,就是比较index 与hoverindex是否相等,如果相等就加class。

Vue.component('logo-picture',{
 template :' \
 <div class="main-logo">\
 <img :src="items[now].src" @click="toggleFlag"/>\
 <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="item.src" />\
 </li>\
 </transition>\
 </div>',
 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就搜索,向下向上就选中给定的返回信息列表。
下面的详情框与<logo-picture>下拉列表差不多。
搜索的话主要是运用$http.jsonp,还有ES6的语法?回掉好像是Promise的.then()。

Vue.component('search-panel',{
 template:'\
 <div 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">×</span>\
 <button @click="searchInput()" class="search-btn">搜一下</button>\
 <div 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>\
 </div>\
 </div>',
 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;
 })
 }
})

两个兄弟组件通信的问题

<logo-picture>换了搜索引擎的话,<search-panel>要换成相应的搜索引擎。这里要新建一个空的Vue对象做中间,因为两个组件不是父子关系。

var bus = new Vue();

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

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

这里要注意this问题,$on里this指向bus,所以要保存this才能引用search-panel.

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多搜索功能实现的精彩文章,请点击专题:javascript搜索功能汇总 进行学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 #Javascript
利用vue-router实现二级菜单内容转换
Nov 30 #Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 #Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 #Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 #Javascript
微信小程序之小豆瓣图书实例
Nov 30 #Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 #Javascript
You might like
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
一个PHP日历程序
2006/12/06 PHP
php在线代理转向代码
2012/05/05 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
PHP实现蛇形矩阵,回环矩阵及数字螺旋矩阵的方法分析
2017/05/29 PHP
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
Python实现list反转实例汇总
2014/11/11 Python
用Python进行基础的函数式编程的教程
2015/03/31 Python
python实现自动更换ip的方法
2015/05/05 Python
Python3遍历目录树实现方法
2015/05/22 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
优秀员工自荐信范文
2013/10/05 职场文书
高二地理教学反思
2014/01/24 职场文书
房地产开盘策划方案
2014/02/10 职场文书
三年级评语大全
2014/04/23 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
教师个人年终总结
2015/02/11 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
Python学习之异常中的finally使用详解
2022/03/16 Python