基于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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
深入认识JavaScript中的函数
Jan 22 Javascript
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
理解javascript async的用法
Aug 22 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 Javascript
一篇文章了解正则表达式的替换技巧
Feb 24 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
15种PHP Encoder的比较
2007/03/06 PHP
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
php GUID生成函数和类
2014/03/10 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
使javascript也能包含文件
2006/10/26 Javascript
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
python的类方法和静态方法
2014/12/13 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
Python 字符串与数字输出方法
2018/07/16 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
python实现杨氏矩阵查找
2019/03/02 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
考察现实表现材料
2014/05/19 职场文书
答谢词范文
2015/01/05 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
详解php中流行的rpc框架
2021/05/29 PHP
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js