基于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 相关文章推荐
Javascript优化技巧(文件瘦身篇)
Jan 28 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 Javascript
JS控制表单提交的方法
Jul 09 Javascript
使用 jQuery 实现表单验证功能
Jul 05 jQuery
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 Javascript
three.js 如何制作魔方
Jul 31 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
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
python中的json总结
2018/10/11 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
python代码实现猜拳小游戏
2020/11/30 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
报纸媒体创意广告词
2014/03/17 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
授权委托书怎么写
2014/04/03 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
市场营销计划书范文
2015/01/16 职场文书
债务纠纷起诉书
2015/05/20 职场文书
文艺委员竞选稿
2015/11/19 职场文书
如何写好开幕词?
2019/06/24 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python