uniapp实现一个搜索加提示功能（含传参等）

r囧r小猫 2022-12-05 05:20 146阅读 0赞

## 先看代码，复制使用即可，我已帮您考虑到使用v-for循环或者其他可能带来的问题。（这里推荐您安装插件使用scss）您将看到以下效果。 ##

![图片][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzgyMTI4MQ_size_16_color_FFFFFF_t_70_pic_center]

<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) {  //这一步是获取数据 您可以通过接口获取 这里做前端模拟处理
    				// 需要和后台协商没有数据时候传递默认的几条
    				// axios.get('/getList?value='+value).then(res=>{ //请求案例
    				// this.SearchList = res.data.data
    				// })
    				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) {  //input框的change事件
    				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
    				// 拿到数据 做页面跳转操作比如
    				// uni.navigateTo({ 
    				// url:"../cart/cart"
    				// })
    			}
    		},
    		onLoad() { }
    	}
    </script>
    
    <style lang="scss">
    	$max:100%;
    	.box { 
    		width: $max;
    		padding: 10 30rpx; //上下10 左右30 
    		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>

附加和可能出现的有用信息已添加注释  
其他有关uniapp的疑问或者此方法不理解的地方您可留言，我会尽快回复并帮您解决。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzgyMTI4MQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/f1dea19e3fad449f8ab61c0f9cef69c5.png