效果展示:

Search.vue:

    <div class="search-content" ref="search" v-show="keyword">
<!--双向绑定keyword-->
<ul>
<!--遍历找到的城市-->
<li class="search-item border-bottom" v-for="(city,index) in cityList" :key="index">{{city}}</li>
<!--没有找到时的显示-->
<li class="search-item border-bottom" v-show="hasCity">
没有找到匹配数据
</li>
</ul>
</div>

当有输入时:   

const result = []
//this.cities格式: {
// "id": 933,
// "spell": "zhangpu",
// "name": "漳浦"
// }
...
for (let i in this.cities) {
this.cities[i].forEach((value) => {
if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
result.push(value.name)
}
})
this.cityList = result
}

没有输入时:

if (!this.keyword) {
this.cityList = []
return
}

添加 computed 计算属性:

  computed: {
hasCity () {
return !this.cityList.length
}
}
//负责显示与否:
<li class="search-item border-bottom" v-show="hasCity">
没有找到匹配数据
</li>
<template>
<div>
<div class="search">
<input type="text" v-model="keyword" class="search-input" placeholder="输入城市名或拼音">
</div>
<div class="search-content" ref="search" v-show="keyword">
<!--双向绑定keyword-->
<ul>
<!--遍历找到的城市-->
<li class="search-item border-bottom" v-for="(city,index) in cityList" :key="index">{{city}}</li>
<!--没有找到时的显示-->
<li class="search-item border-bottom" v-show="hasCity">
没有找到匹配数据
</li>
</ul>
</div>
</div>
</template> <script>
import BScroll from 'better-scroll'
export default {
name: 'CitySearch',
props: ['cities'],
data: function () {
return {
// 关键字
keyword: '',
// 城市列表
cityList: [],
// 函数节流
timer: null
}
},
computed: {
hasCity () {
return !this.cityList.length
}
},
watch: {
keyword: function () {
if (this.timer) {
clearTimeout(this.timer)
}
this.timer = setTimeout(() => {
if (!this.keyword) {
this.cityList = []
return
}
const result = []
for (let i in this.cities) {
this.cities[i].forEach((value) => {
if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
result.push(value.name)
}
})
this.cityList = result
}
}, 100)
}
},
mounted () {
this.scroll = new BScroll(this.$refs.search)
}
}
</script> <!--组件样式,不影响其他组件-->
<!--1rem = html front-size = 50px-->
<style lang="stylus" scoped>
@import "~styles/varibles.styl"
.search
height .72rem
padding 0 .1rem
background $bgColor
.search-input
padding 0 .1rem
box-sizing border-box
height .62rem
line-height .62rem
width 100%
text-align center
border-radius .06rem
.search-content
overflow hidden
background #eee
position absolute
top 1.58rem
left 0
right 0
z-index: 1
bottom 0
.search-item
line-height .62rem
padding-left .2rem
color #666
background #fff
</style>

Search.vue

项目地址:

https://github.com/1417766861/Vue2.5-App/tree/city-search-logic/Travel

Vue2.5开发去哪儿网App 搜索功能完成的更多相关文章

  1. Vue2.5 开发去哪儿网App

    Vue2.5开发去哪儿网App 技术栈和主要框架

  2. Vue2.5开发去哪儿网App 首页开发

    主页划 5 个组件,即 header  icon  swiper recommend weekend 一. header区域开发 1. 安装 stylus npm install stylus --s ...

  3. Vue2.5开发去哪儿网App 城市列表开发之 Vuex实现数据共享及高级使用

    一,数据共享 1.  安装: npm install vuex --save 2. 在src目录下 新建state文件夹,新建index.js文件 3. 创建一个 store import Vue f ...

  4. Vue2.5开发去哪儿网App 从零基础入门到实战项目

    第1章 课程介绍本章主要介绍课程的知识大纲,学习前提,讲授方式及预期收获. 1-1 课程简介 试看第2章 Vue 起步本章将快速讲解部分 Vue 基础语法,通过 TodoList 功能的编写,在熟悉基 ...

  5. Vue2.5开发去哪儿网App 第五章笔记 上

    1.css动画原理 .fade-enter{ opacity: 0; } .fade-enter-active{ transition: opacity 2s; } .fade-leave-to{ o ...

  6. Vue2.5开发去哪儿网App 城市列表开发之 兄弟组件间联动及列表性能优化

    一,  兄弟组件间联动 1.  点击城市字母,左侧对应显示 给遍历的 字母 添加一个点击事件: Alphabet.vue @click="handleLetterClick" ha ...

  7. Vue2.5开发去哪儿网App 城市列表开发

     一,城市选择页面路由配置                                                                                        ...

  8. Vue2.5开发去哪儿网App 第五章笔记 下

    1. 多个元素或组件的过渡 多个元素的过渡: <style> .v-enter,.v-leace-to{ opacity: 0; } .v-enter-active,.v-leave-ac ...

  9. Vue2.5开发去哪儿网App 第四章笔记 下

    1.解决非父子组件之间的传值问题 非父子组件传值(Bus/总线/发布订阅模式/观察者模式) 给 Vue类上挂在一个属性,然后创建vue实例时,实例就拥有了这个属性 Vue.prototype.bus ...

随机推荐

  1. 2018.11.01 bzoj4325: NOIP2015 斗地主(贪心+搜索)

    传送门 原来一直以为是一道大模拟. 没想到是一道搜索+最优性剪枝 如何搜最优呢? 我们考虑怎么最快出完. 大概是应该尽量出当前能出出去最多的吧. 于是我们选择优先出顺子. 这样做有什么好处呢? 我们会 ...

  2. 2018.10.27 loj#2292. 「THUSC 2016」成绩单(区间dp)

    传送门 g[i][j][k][l]g[i][j][k][l]g[i][j][k][l]表示将区间l,rl,rl,r变成最小值等于kkk,最大值等于lll时的花费的最优值. f[i][j]f[i][j] ...

  3. springboot深入学习(五)-----spring data、事务

    spring data项目是spring解决数据访问问题的一系列解决方案,包含了大量关系型数据库以及非关系型数据库的访问解决方案. 一.spring data jpa 1.简介 jpa是一套规范,不提 ...

  4. 用react脚手架新建项目

    1.全局安装 create-react-app脚手架 [可能需要管理员权限]npm install -g create-react-app 2.创建项目 create-react-app projec ...

  5. 动态创建控件 #Create(...)

    在类中创建一个控件对象;例:CButton m_btn; 用Create创建一个对象(#其实已经与其绑定)m_btn.Create(.....); #注意Create()函数的参数 问题一:点击一个b ...

  6. MIT molecular Biology 笔记11 位点特异性重组 和 DNA转座

    位点特异性重组 和 DNA转座 视频 https://www.bilibili.com/video/av7973580/ 教材 Molecular biology of the gene 7th ed ...

  7. [转]Windows中使用命令行方式编译打包Android项目

    http://my.oschina.net/liux/blog/37875 网上很多用Ant来编译打包Android应用的文章,毕竟Ant是纯Java语言编写的,具有很好的跨平台性.今天想写个纯win ...

  8. Java关键字、标识符、表达式、常用符号

    关键字 包:package(包).import(导入) 类:class(类).enum(枚举).interface(接口).extends(继承).implements(实现) 方法:void(空). ...

  9. SurfaceView+MediaPlayer播放视频

    SurfaceView拥有独立的绘图表面,因此SurfaceView的UI就可以在一个独立的线程中进行行绘制.又由于不占用主线程资源,SurfaceView一方面可以实现复杂而高效的UI,另一方面又不 ...

  10. poj3924

    题目:给定一个起点(xw1, yw1),直线经过(xw2, yw2),速度为vw无限运动的点,还有一个起点(xt1, yt1),终点(xt2, yt2),并且在以vt速度在两者往返运动,求两者在运动中 ...