Vue2.5开发去哪儿网App 搜索功能完成
2024-08-27 22:00:29
效果展示：
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
最新文章
- [译]Asp.net MVC 之 Contorllers（二）
- net 数据库连接详解 相当经典啊
- asp.net日志跟踪方法
- Linux服务器通过rz/sz轻松上传下载文件
- 解决Exception in thread "main" java.lang.UnsupportedClassVersionError: org/apache/maven/cli/MavenCli : Unsupported major.minor version 51.0
- asp.net MVC中如何用Membership类和自定义的数据库进行登录验证
- uva 10673 Play with Floor and Ceil
- Java Web开发之详解JSP
- jquery 手机 图片切换 例子 网址
- android ADT 设置编辑字体
- MongoDB和MySQL的区别
- 逻辑关系下的NN应用
- AppScan 工作原理
- 纪念一下学写pipeline时脑子里的坑
- Java Web之表单重复提交问题
- MySQL服务器监控注意事项
- vscode 常用扩展推荐
- [Unity工具]批量修改Texture
- Java NIO Test Case
- 20145310《网络对抗》Exp2 后门原理与实践