制作有提示的搜索框

<header class="mui-bar mui-bar-nav" style="margin: 0px;height: 34px;margin-top:6px;">
						<div style="width:100%;height:100%;background-color: #fff;position: relative;box-shadow: 0px 2px 1px #c8c6c2;border-radius: 3px;">
							<!-- <a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left cfgx-head-back"></a> -->

							<h1 class="mui-title" style="left: 20px;">
								<input type="search" class="cfgx-head-ipt" id="tipinput" @input="inputLength()"  @blur="limtNone()" @focus="limtBlock()"
								 @keypress="searchGoods" placeholder="请输入目的地搜索" style="">

							</h1>
							<a href="javascript:void(0)" class=" mui-pull-right cfgx-head-xx" v-if="isVlaueShow" @tap="cleanVlaue()"></a>
							<a href="javascript:void(0)" id="searchInput" class="cfgx-head-search  mui-pull-right" @tap="pageCheKu()">
								搜索
							</a>
						</div>

					</header>

				// 监听input输入事件
					inputLength() {
						var val = $("#tipinput").val();

						if (val.trim().length > 0 && val != '') {
							_this.isVlaueShow = true;
							_this.limtSecarch(val)
						} else {
							_this.limtDataList = [];
							_this.isVlaueShow = false;
						}
					},
					cleanVlaue() {
						$("#tipinput").val("");
						_this.limtDataList = [];
						_this.isVlaueShow = false;
					},
					limtBlock() {
						_this.inputLength()
					},
					limtNone() {
						_this.limtDataList = [];
					},
					limtSecarch(val){
								searchValue(val,(status,result)=>{
									_this.limtDataList = [];
									result.tips.forEach(val=>{
										if(val.name!=''&&val.district.indexOf('上海市')>-1){
											if(val.address==''){
												val.address = val.name;												
											}
											//名字跟坐标
											_this.cheKuValue = val.name;
											_this.cheKuLat = val.location.lat;
											_this.cheKuLng = val.location.lng;
											// return false
											_this.limtDataList.push(val);
											// this.limtDataList.push(val);
											}
									})
								})
							},

/**
 * 根据搜索值列出列表
 * @param {Object} value
 */
function searchValue(value, callback) {
	AMap.plugin('AMap.Autocomplete', function() {
		// 实例化Autocomplete
		var autoOptions = {
			//city: '全国',
			city: '上海'
		}
		var autoComplete = new AMap.Autocomplete(autoOptions);
		autoComplete.search(value, function(status, result) {
			var arr = [];
			// console.log(result.tips)
			if(result.tips != undefined){
					result.tips.map((val, index) => {
				if (val.name != '' && val.district.indexOf('上海市') > -1&&val.location!="" && val.location!=undefined) {
					arr.push(val)
				}
			})
			}
		
			result.tips = arr;
			callback(status, result)
			// 搜索成功时，result即是对应的匹配数据
			// var node = new PrettyJSON.view.Node({
			// 	el: document.querySelector("#input-info"),
			// 	data: result
			// });
		})
	})
}

					pageCheKu(){
						var _searchVal = $("#tipinput").val();
						if (!_searchVal || _searchVal.trim().length === 0) {
							mui.toast("请输入停车场名称!")
							return false;
						}
						var val = _this.cheKuValue;
						var lat = _this.cheKuLat;
						var lng = _this.cheKuLng;
						$("#tipinput").val();
						var url = `CheKuNavigation/parkingCar.html?_searchVal=${val}&lat=${lat}&lng=${lng}`;
						url = encodeURI(encodeURI(url)); //用了2次encodeURI 编码
						mui.openWindow({
							swipeBack: true, //启用右滑关闭功能
							url:url,
							waiting: {
								autoShow: true, //自动显示等待框，默认为true
								title: '正在加载数据...', //等待对话框上显示的提示内容
							},
						})
					},
					searchGoods(event) {
						if (event.keyCode == 13) {
							event.preventDefault(); //禁止默认事件（默认是换行）
							var _searchVal = $("#tipinput").val();
							app.limtDataList = [];
							if (!_searchVal || _searchVal.trim().length === 0) {
								mui.toast("请输入停车场名称!")
								return false;
							}
							var val = _this.cheKuValue;
							var lat = _this.cheKuLat;
							var lng = _this.cheKuLng;
							$("#tipinput").val();
							var url = `CheKuNavigation/parkingCar.html?_searchVal=${val}&lat=${lat}&lng=${lng}`;
							url = encodeURI(encodeURI(url)); //用了2次encodeURI 
							mui.openWindow({
								swipeBack: true, //启用右滑关闭功能
								url:url,
								waiting: {
									autoShow: true, //自动显示等待框，默认为true
									title: '正在加载数据...', //等待对话框上显示的提示内容
								},
							})
						}
					},