uniapp/pages/test/test2.vue

<template>
	<view class="appWrapper">
		<!-- 输入下拉查询 start -->
		<form action="">
			<view class="form-item">
				<view class="title " style="vertical-align:top">
					<text class="necessary">*</text>
					站点:
				</view>
				<view style="position:relative" class="innerZd">
					<input name="siteName" v-model="formMess.siteName" @click="toggleShow" @focus="focusfns" @input="handleInput()"
					 placeholder="请输入或选择"></input>

					<view class="siteItems" v-if="isShow" style="max-height:60vh;overflow:auto">
						<view class=" site-item" v-if="!siteItemData.length">暂无结果</view>

						<view class="site-item" v-for="(item,index) in siteItemData" @click="changeModel(item,index)" :key="index">{{item.siteName}}</view>
					</view>
				</view>
			</view>
		</form>
		<!-- 输入下拉查询 end -->

	</view>
</template>

<script>
	export default {

		data() {
			return {
				isShow: false,
				formMess: {
					"siteName": "",
				},

				siteItemDataOrigin: [],
				siteItemData: [],

				
			}
		},

		mounted() {
			
			// 点击空白隐藏弹框
			document.addEventListener('click', (e) => {
				if (e.target.className != 'uni-input-input') {
					this.isShow = false;
				}
			});
		},
		onLoad: function(option) {
			this.getSiteList();
		

		},
		methods: {
			
	
			//站点下拉请求数据
			async getSiteList() {
				const res = await this.$myRequest({
					url: 'SiteManagement/getSiteList',
				})
				this.siteItemData = res.data.data;
				this.siteItemDataOrigin = res.data.data;
				this.siteItemData = this.siteItemDataOrigin;
			},
			
	
			//选中下拉选项，隐藏框，赋值
			changeModel: function(item, index) {
				this.isShow = false;
				this.formMess.siteName = item.siteName;
			},
			
			
			// 输入框点击 显示隐藏下拉框
			toggleShow: function() {
				this.isShow = !this.isShow;
			},
			
			//点击下拉筛选
			handleInput() {
				//将元素根据搜索内容过滤出来  这里改变了siteItemData
				this.siteItemData = this.siteItemDataOrigin;
				this.siteItemData = this.siteItemData.filter(item => item.siteName.indexOf(this.formMess.siteName) > -1);
			},

			focusfns: function(e) {
				//将元素根据搜索内容过滤出来  这里改变了siteItemData
				this.siteItemData = this.siteItemDataOrigin;
				this.siteItemData = this.siteItemData.filter(item => item.siteName.indexOf(this.formMess.siteName) > -1);
			},
		}
	}
</script>