先看代码,复制使用即可,我已帮您考虑到使用v-for循环或者其他可能带来的问题。(这里推荐您安装插件使用scss)您将看到以下效果
[JavaScript] 纯文本查看 复制代码 <template>
<view class="box">
<input type="text" @input="GetValue" class="S-input" :placeholder="placeholder" @focus="ShowValue">
<view class="InputList" v-show="isValue && SearchList.length">
<view v-for="item in SearchList" :key="item.id" @click="SetValue(item.title)" class="listSon">
{{item.title}}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
Value: '',
placeholder: '请输入搜索内容',
isValue: false,
SearchList: []
}
},
methods: {
ShowValue() {
this.isValue = !this.isValue
if (this
.isValue) {
this.getList()
} else {}
},
getList(
value
) {
if (!value) {
let arr = [{
id: 1,
title: "我是搜索信息1"
}, {
id: 2,
title: "我是搜索信息2"
}, {
id: 3,
title: "我是搜索信息3"
}, {
id: 4,
title: "我是搜索信息4"
}, {
id: 5,
title: "我是搜索信息5"
}, ] this.SearchList = arr
} else {
this.getList()
}
},
GetValue(
event) {
console.log('当前输入' + event.detail.value) event.detail.value ? this.Value = event.detail.value : this
.Value = ''
event.detail.value ? this.getList(this.Value) : this.getList(this.Value)
},
SetValue(
value) {
console.log('搜索信息为' + value) this.Value = value this.placeholder = value this.SearchList = [] this
.isValue = !this
.isValue
}
},
onLoad() {}
}
</script>
<style lang="scss">
$max:100%;
.box {
width: $max;
padding: 10 30rpx;
height: 64rpx;
display: flex;
justify-content: center;
align-items: center;
min-height: 32px;
position: relative;
background: #409EFF;
.S-input {
width: 660rpx;
background: #f7f7f7;
padding-left: 30rpx;
border-radius: 32rpx;
}
.InputList {
position: absolute;
width: 690rpx;
height: auto;
min-height: 100rpx;
top: 74rpx;
border: 1rpx solid #409EFF;
border-radius: 5rpx;
padding: 10rpx;
.listSon {
height: 50rpx;
line-height: 50rpx;
font-size: 32rpx;
text-indent: 1em;
}
.listSon:nth-of-type(even) {
background: #f7f7f7;
}
}
}
</style>
|