vuetify ——输入中文搜索

原创已于 2022-04-06 22:33:22 修改 · 626 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2021-12-18 21:00:36 首次发布

本文介绍了一种使用compositionstart和compositionend事件监听中文输入的方法，并结合input和keyup事件实现输入框内容变化时的实时搜索过滤功能。文章通过具体代码示例展示了如何在Vue框架中实现这一功能。

compositionstart事件只有在输入中文时才会触发，触发事件在input事件之前；compositionend表示结束中文输入时触发的事件，不管最后输入的是不是中文都会触发

<v-text-field
  class="mr-4"
  v-model.trim="searchName"
  @compositionstart="flag = false"
  @compositionend="flag = true"
  @input="searchCurName(searchName)"
  @keyup="searchCurName(searchName)"
  @keyup.enter="searchCurName(searchName)"
  @click:append="searchCurName(searchName)"
  append-icon="mdi-magnify"
  placeholder="搜索站点或直接输入地址"
  dense
  hide-details
></v-text-field>


export default {
  name: "PcApplication",
  data() {
    return {
    	searchName:null,
    	flag:true
    	}
   	},
   	methods:{
   		searchCurName(name) {
	      const searchName = name.toLowerCase();
	      if (searchName && this.flag) {
	        this.applications = this.applications.filter(item =>
	          item.name.toLowerCase().includes(searchName)
	        );
	        this.expApplications = this.expApplications.map(item => {
	          item.links = item.links.filter(itm =>
	            itm.name.toLowerCase().includes(searchName)
	          );
	          return item;
	        });
	        this.searchNavigations = true;
	      }
	    },
   	}
 }