uniapp/pages/test/test.vue

<template>
	<view>

		<!-- <input type="text"   v-model="searchVal" >
		<view>
			<view v-for="(item,index) in NewItems" :key="index" :value="item.value" v-text="item.name"></view>
		</view> -->


		<input type="text" @input="handleInput()" v-model="mytext">
		<ul>
			<li v-for="data in datalist">
				{{data}}
			</li>
		</ul>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				mytext: '',
				// searchVal:'',
				// items: [
				// 	{name: 1, value: '站点1'},
				// 	{name: 2, value: '站点2'},
				// 	{name: 3, value: '站点3'},
				// 	{name: 4, value: '站点4'},
				// 	{name: 5, value: '站点5'},
				// 	{name: 6, value: '站点6'},
				// 	{name: 7, value: '站点7'},
				// 	{name: 8, value: '站点8'},
				// 	{name: 9, value: '站点9'},
				// 	{name: 10, value: '站点10'},
				// ],
				// NewItems:[
				// 	{name: 10, value: '站点10'}
				// ],
				datalist: ["aaa", "bbb", "ccc", "eee", "eac", "date"],
				list: ["aaa", "bbb", "ccc", "eee", "eac", "date"]

			}
		},
		// watch:{


		// 	searchVal: {
		// 	  	handler: function(val, oldVal) {
		// 	  	  //这时候 o = 岑先生、u = 不认识	
		// 	      this.items.map(function(item){
		// 	      						   // console.log('===='+item.name)
		// 								   // console.log('data===')
		// 								   // console.log(this.$data)
		// 	      	if(item.value.search(val)!=-1){
		// 	      							console.log('this is new items')
		// 	      							console.log(this.NewItems);
		// 	      		this.NewItems.push(item);
		// 	      	}

		// 	      })
		// 	    },
		// 	    deep: true
		// 	  }


		// 	searchVal(val, oldVal){

		// 	           this.items.map(function(item){
		// 	           	if(item.value.search(val)!=-1){
		// 					console.log('this is new items')
		// 					console.log(this.NewItems);
		// 	           		this.NewItems.push(item);
		// 	           	}


		// 	           })
		// 	     }

		// },
		computed: {
			// newItems(){

			// 	var_this=this;
			// 	var NewItems=[];
			// 	this.items.map(function(item){
			// 		if(item.name.search(_this.searchVal)!=-1){
			// 			NewItems.push(item);
			// 		}

			// 	})
			// 	return NewItems
			// }

		},
		methods: {

			handleInput() {
				var newlist = this.list.filter(item => item.indexOf(this.mytext) > -1)
				this.datalist = newlist
			}


		}
	}
</script>

<style>
	ul,
	li {
		list-style: none;
	}

	li {
		position: relative;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #000;
	}

	li span:first-child {
		display: inline-block;
		width: 10px;
		height: 10px;
		background-color: #000;
	}

	li div {
		position: absolute;
		left: 20px;
		top: 0;
		z-index: 1000;
		width: 100px;
		height: 100px;
		border: 1px solid red;
		background-color: #fff;
	}
</style>