Vue Implementation INPUT Input Box Fuzzy Query Method

  • 的头像-Tumi
  • 47 day agopublish

Examples herein share vue achieve a specific code input box Fuzzy Input query method, for your reference, as follows

Principle: The native js the indexOf () method from start to finish retrieving the array, to see if it contains the corresponding elements. Search start position (start parameter is not specified) start at the beginning of an array or arrays. If you find an item, the position of the first occurrence of the item is returned. Index starting position is zero.

If the specified element is not found in the array or -1.

The following examples look at:

Search before:

vue实现Input输入框模糊查询方法

Search after:

vue实现Input输入框模糊查询方法

implementation:

  methods: {// click on the search project search () {// support fuzzy queries // this.xmgcqkJsonsData: search for total data // toLowerCase (): for lowercase string, so fuzzy query more clearly let _search = this.jobNo.toLowerCase (); let newListData = []; // array for storing searched out if the new data (_search) {this.xmgcqkJsonsData.filter (item => {if (item.code.toLowerCase () indexOf (_search) == -1.! ) {newListData.push (item);}})} this.xmgcqkJsonsData = newListData; // console.log ( 'new array', newlistdata)}}  
The above method is to query according to the work list number / water number, and if the search on other conditions is increased on the current basis, such as items / Project Name, then you only need to add a judgment condition on the original code, such as:

IF (item.code.tolowercase (). Indexof (_search) ! == -1 || item.name.tolowercase (). Indexof (_Search)! == -1) {newlistdata.push (item);}
   
Just how to implement the method of fuzzy query in the Vue INPUT input box. More Tutorials Click on “Vue.js Front End Components Learning Tutorial”, welcome everyone to learn.

With regard to the tutorial of the Vue.js component, please click on the Topic Vue.js Component Learning Tutorial for learning.

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment