Shulou(Shulou.com)05/31 Report--

This article mainly introduces JavaScript how to achieve the local fuzzy search function of the relevant knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that everyone after reading this JavaScript how to achieve the local fuzzy search function article will have a harvest, let's take a look at it.

I. Project prospects

As vue and react should be used more and more widely in actual development, the front end processes more and more data. The main purpose of this article is to process the data returned by the server and make fuzzy queries according to the conditions, so as to reduce the number of requests sent to the server and improve performance and user experience. Here is a simple DEMO to implement the fuzzy query function:

The data for the test are as follows:

Var data = [{"title": "how long is the repair period of your lovelorn?" , "title_image": "https://img.doutuimao.net/dtmimg/b7c9ec393414982682e5a477eb995b55"," desc ":" Food and Beverage Test how long your lovelorn repair period is "," id ":" 2 "," num ": 951357," flag ":" 01 "} {"title": "how high is your sajiao index?" , "title_image": "https://img.doutuimao.net/dtmimg/60d8ed86d1f72357c194506270c72ac1"," desc ":" A woman who can act coquettish in good food and food is the best. How can you act coquettish? how charming are you? come and test it! " , "id": "3", "num": 963258, "flag": "01"}, {"title": "how will you marry in the future?" , "title_image": "https://img.doutuimao.net/dtmimg/538632e75159ce8e586778d289c66a11"," desc ":" I believe that many people are looking forward to their future marriage style. Do you want to know your future marriage style? " , "id": "4", "num": 879564, "flag": "01"},] II. Knowledge points involved

Usage of Object.assign ()

The Object.assign method is used to copy all enumerable properties of the source object (source) to the target object (target). It requires at least two objects as parameters, the first parameter is the target object, and the subsequent parameters are source objects.

/ / handle the raw array let arrnew = data.map ((item, index) = > {return Object.assign ({}, {"desc": item.desc,}) filter () method

The filter () method is used to filter array elements. This method creates a new array containing all the elements of the test implemented by the provided function. Filter () does not detect the empty array, nor does it change the original array.

IndexOf () fuzzy query

The indexOf () method returns the position where a specified string value first appears in the string. If the string value to be retrieved does not appear, the method returns-1. In conjunction with the filter () method, you can detect whether the array contains the entered value and return it.

Var newData = arrnew.filter (item = > {if (item.desc.indexOf (value) >-1) {/ / indexOf method if the return value of xxx.indexOf ("") is 0 return item} return newData}) the complete code of DEMO is as follows: function creat () {var value = input.value; var html = "" Let arrnew = data.map ((item, index) = > {return Object.assign ({}, {"desc": item.desc) })}) var newData = arrnew.filter (item = > {if (item.desc.indexOf (value) >-1) {/ / indexOf method if the return value of xxx.indexOf ("") is 0 return item} return newData}) if (newData .length > 0) {for (var I = 0) I < newData.length; iTunes +) {html + = `${newdata [I] .desc} else {html + = `No data at the moment`} ul [XSS _ clean] = html } creat () input.onchange = function (e) {creat ()} this article on "how JavaScript implements the local fuzzy search function" ends here. Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve local fuzzy search function in JavaScript". If you want to learn more knowledge, you are welcome to follow the industry information channel.

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.