开启辅助访问 切换到宽版

精易论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

用微信号发送消息登录论坛

新人指南 邀请好友注册 - 我关注人的新帖 教你赚取精币 - 每日签到


求职/招聘- 论坛接单- 开发者大厅

论坛版规 总版规 - 建议/投诉 - 应聘版主 - 精华帖总集 积分说明 - 禁言标准 - 有奖举报

查看: 902|回复: 0
收起左侧

[技术分享] uniapp实现一个搜索加提示功能(含传参等)

[复制链接]
结帖率:100% (4/4)
发表于 2021-10-26 08:48:25 | 显示全部楼层 |阅读模式   河北省石家庄市
先看代码,复制使用即可,我已帮您考虑到使用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>

您需要登录后才可以回帖 登录 | 注册

本版积分规则 致发广告者

发布主题 收藏帖子 返回列表

sitemap| 易语言源码| 易语言教程| 易语言论坛| 易语言模块| 手机版| 广告投放| 精易论坛
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论,本站内容均为会员发表,并不代表精易立场!
论坛帖子内容仅用于技术交流学习和研究的目的,严禁用于非法目的,否则造成一切后果自负!如帖子内容侵害到你的权益,请联系我们!
防范网络诈骗,远离网络犯罪 违法和不良信息举报电话0663-3422125,QQ: 793400750,邮箱:wp@125.la
Powered by Discuz! X3.4 揭阳市揭东区精易科技有限公司 ( 粤ICP备12094385号-1) 粤公网安备 44522102000125 增值电信业务经营许可证 粤B2-20192173

快速回复 返回顶部 返回列表