xfapp/pages/index/components/searchSelect/searchSelect.vue

<template>
	<view>

		<view class="searchSelect shadow" v-if="flag">
			<view class="cu-bar search bg-white">
				<view class="search-form round" style="margin-top:0">
					<input @focus="InputFocus" @blur="InputBlur" @input="handleInput()" v-model="searchInput"
						:adjust-position="false" type="text" placeholder="" confirm-type="search"
						style="border:none"></input>
					<!-- <text class="cuIcon-search "></text> -->
				</view>
			</view>
			<view class="select-items">
				<view class="select-item" v-for="(item,index) in searchList" @click="clickSelectItem(item,index)"
					:key="index">{{item}}</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'searchSelect',
		props: {
			flag: {
				type: Boolean,
				default: false
			},
			searchList: {
				type: Array,
				// default: []
			},
			searchList2: {
				type: Array,
				// default: []
			}
		},
		data() {
			return {

				searchInput: '',
				// flag: false,
				// searchList: [],
				// searchList2: [],

			}
		},
		onload() {
			this.getSearchList();
		},
		methods: {

			//请求
			async getSearchList(ming = {}) {
				const res = await this.$myRequest({
					url: 'Index/getSiteDropDownBox',
					data: ming
				})
				res.data.data.forEach(item => {
					this.searchList.push(item.siteName)
					this.searchList2.push(item.siteName)
				});
			},
			// 下拉选择
			clickSelectItem(item, index) {
				this.getSearchList({
					"siteName": item
				});
				this.flag = false
			},
			handleInput() {
				var newlist = this.searchList2.filter(item => item.indexOf(this.searchInput) > -1)
				this.searchList = newlist
			},


			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},

			changeTab(Inv) {
				that.navIdx = Inv;

			}
		}
	}
</script>

<style>

</style>