Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how vue+iview realizes fuzzy search for pinyin, initials and Chinese characters". In daily operation, I believe many people have doubts about how vue+iview realizes fuzzy search for pinyin, initials and Chinese characters. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for everyone to answer the doubts of "how to achieve fuzzy search for pinyin, initials and Chinese characters in vue+iview". Next, please follow the editor to study!

Take a look at the effect picture first.

Support for Chinese characters:

Pinyin is supported:

Initials are supported:

Solution idea

In the new page: in the remote search method, the data returned by the background is processed by splicing a special character after the returned value value, and then stitching the value entered in your input box, so that the value you enter will not be filtered out because the value contains the value, so it can be assigned a value.

Verification rule modification: if there is a form verification, change the verification rule type: 'string', because the splicing is a string.

Submit submission method: in the submit submission form method to do the next processing, just spliced the string, with special characters processed into an array to take the first bit of the original value value, but in the form of a string, to let the background receive the form of a string.

Edit the echo page: the id value returned by the background fit is in the form of a string, and the value of each array object in the returned drop-down list is also a string. If the background does not change, you can only loop through it and process it into a string.

Is it true that you look confused and see more clearly directly in the picture:

Page structure

Check rule

Single selection drop-down box type is a string, multi-selection type requires array type

Remote search method

This place is handled in the same way as multi-check boxes.

In the parameter passing of the form submit submission method

Select the drop-down box to process the value in the selected v-model (the value is bound here), remove the special characters and input values that have just been concatenated, and take the id value before.

Multiple selection because the v-model value you get is an array, so use the map function to process each item

The above steps realize the search of pinyin, initials (regardless of case) and Chinese characters, but it must be noted that these types of searches need to be supported in the background and the data can be returned correctly.

Because I use the same page to edit and create, I also edit the echo data:

At this point, the study of "how to realize the fuzzy search of pinyin, initials and Chinese characters in vue+iview" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.