[经验分享] VUE 下 IView 框架 如何让 Select 输入框既可以输入过滤选项结果，同时也可以正常像 input 一样键入字符串

 IView 框架 Select 标签

 上面 Gif 图可以看到 如果想要得到搜索引擎那样，既可以联想过滤结果，又可以输入自己的想要输入的文本，但是框架所限根本没办法去键入没有经过匹配结果的内容（这个需求在我刚入行的时候，曾经一度没办法解决，问老大也没有办法解决，最终只能无耻地使用 placeholder 来强行留住输入结果），直到最近两天才真正解决（果然前端这种东西还是要有自己的想法，否则只能被人带着跑）

 解决办法是用使用 [AutoComplete 自动完成(点击跳转)] (https://www.iviewui.com/components/auto-complete)

 我们这里只要改造下面的 option 的内容 将自动补全 @qq.com 邮箱内容就可以实现将后端取出来的 json 集合 赋值到 data 里，这里补上原来官方的 Demo 代码：

<template> 
	<AutoComplete v-model="value2" @on-search="handleSearch2" placeholder="input here" style="width:200px">  
		<Option v-for="item in data2" :value="item" :key="item">{{ item }}						 
       		</Option>  
	</AutoComplete> 
</template>  
<script> 
	export default { 
		data () { 
			return { value2: '', data2: [] } }, 
		methods: { handleSearch2 (value) { 
			this.data2 = !value || value.indexOf('@') >= 0 ? [] : [ value + '@qq.com', value + '@sina.com', value + '@163.com' ]; } 
		}
	} 
</script>
​

修改后的代码：

<AutoComplete  v-model="accidentModel.prjName"
	placeholder="请选择或输入项目名称"
	@on-change="onQueryChange"
	@on-select="onSelectFun"
	@on-clear="onClearFun"
	clearable
	remote
	style="width: 522px">
<Option  v-for="(option,  index)  in  prjItems"
	:value="option.prjNum"
	:key="index">{{option.prjName}}</Option>
</AutoComplete>
<script> 
	export default { 
		method: {
			onSelectFun  (value)  {
				let  obj  =                           this.prjItemsInit.filter(item  =>  item.prjNum  ===  value)
				setTimeout(()  =>  {
					this.accidentModel.prjNum  =  obj[0].prjNum
					this.accidentModel.prjName  =  obj[0].prjName
				},  20)
			},
			onQueryChange  (query)  {
				if  (query)  {
					const  list  =  this.prjItemsInit.map(item  =>  {
						return  {
							prjNum:  item.prjNum,
							prjName:  item.prjName
						}
					})
				this.prjItems  =  list.filter(item  =>  				 
item.prjName.toLowerCase().indexOf(query.toLowerCase())  >  -1)

}  else  {

this.prjItems  =  this.prjItemsInit

}

},
		}
	}
</script>
​

代码部分乱了点，也没啥办法，下了班之后就急匆匆回家，然后连接了下公司 vpn，晚上部署项目吃饭洗碗也就没啥时间管博客的内容了，现在睡前又临时用 ipad 改了下，结果发现 safari 某种程度上也确实挺反人类的
...... 总体上还行，啥时候有空就回来改改排版吧。（如果有人需要看的话，否则我连注释都懒得写 大概就这样了吧 ～