foreword

I believe that many friends have encountered the need to add a search box function on the web page. This article briefly introduces the realization of two search boxes.
The functions of the search box are generally divided into:
(1) Instant search, that is, the search box input content is automatically retrieved, and the display of the interface will be changed as the search content is continuously input
(2) Click the search button to start the search

The following are the simple implementations of the two search boxes.

1. Automatic retrieval of content entered in the search box

To realize the automatic retrieval function of the input content in the search box, it can be further divided into two situations.

(1) After retrieving and entering new content, it automatically sends a search request to the backend (instant search)

This design is similar to the current Baidu search, that is, after entering a piece of content in the search box, it will automatically initiate a search data request, and the interface will naturally display new content.
Advantages:
This design will be very smart, you don’t need to click the search box to search, the search is faster and more efficient, and the use is more convenient.
Disadvantages:
1) The content to be searched may be entered part by part. Every time the search box adds new content, it is searched, and often the desired result cannot be obtained; 2)
If the search content is entered in segments too many times, it will cause Too many requests for server responses. A user may need to request server responses multiple times during an effective retrieval process. Server performance and network resources will be seriously wasted. At the same time, too many users may cause the server to respond slowly. , will seriously cause the server to crash.

Note: In order not to waste too many resources when using instant search, it is often necessary to limit the time for sending requests or the amount of content to be searched, that is, to send requests only after a certain period of time or when the amount of content to be searched meets a certain condition.

The following content comes from: Real-time retrieval function implementation of input search box

Reference Code:

methods: {
  //使用_.debounce控制搜索的触发频率
  //准备搜索
  search: _.debounce(
    function () {
      let that = this;
      //删除已经结束的请求
      _.remove(sources, function (n) {
        return n.source === null;
      });
      //取消还未结束的请求
      sources.forEach(function (item) {
        if (item !== null && item.source !== null && item.status === 1) {
          item.status = 0;
          item.source.cancel('取消上一个')
        }
      });

      //创建新的请求cancelToken,并设置状态请求中
      var sc = {
        source: axios.CancelToken.source(),
        status: 1 //状态1：请求中，0:取消中
      };
      //这个对象加入数组中
      sources.push(sc);
      //开始搜索数据，yourhttp替换成你自己的请求路径
      axios.get('yourhttp', {
        cancelToken: sc.source.token
      }).then(function (res) {
        //请求成功
        sc.source = null; //置空请求canceltoken

        //TODO这里处理搜索结果
        console.log(res.data);
        that.result = res.data;

      }).catch(function (thrown) {
        //请求失败
        sc.source = null; //置空请求canceltoken

        //下面的逻辑其实测试用
        if (axios.isCancel(thrown)) {
          console.log('Request canceled', thrown.message);
        } else {
          //handle error
        }

      });
    },
    500 //空闲时间间隔设置500ms
  )
}

(2) Search all possible data in one request, and then filter the data according to the content in the search box

If:
1) The content of the search box is relatively fixed, unlike websites such as Baidu that need to be compatible with different search content, and the overall data volume of the database is not very large 2) The
server performance is limited, and it is hoped to minimize the number of request server responses

我们可以采用一次请求搜索到所有可能需要的数据，然后根据搜索框中的内容进行数据过滤，显示需要的数据
In order to achieve this effect, we can use Vue's Filter function to filter data. The overall filter is divided into local filter and global filter.

The specific implementation of the filter can refer to the following link: The use of filter (filter) in Vue.js

Here I will introduce another way to use filters, which is the way I am currently using. This way is not the same as the way in the link. It is relatively simple and straightforward, and it looks easy to understand. It can also switch between multiple pages. Function.
Not much to say about the code!

result_Lists() {
  let start = (this.pageNo - 1) * this.pageSize; 	//定义显示的第一条数据编号
  let end = start + this.pageSize;		//根据起始编号和每页规定的显示数量，定义显示的最后条数据编号
  //返回经过过滤的数据
  return this.result.filter(item =>
  (item.content && item.content.includes(this.searchContent)) 
  ).slice(start, end);
  //简单介绍slice(start,end)：
  //方法可从已有数组中返回选定的元素，返回一个新数组，包含从start到end（不包含该元素）的数组元素。
}

As for this implementation, I personally think it is simpler and more straightforward, easy to understand, and can also be well coordinated with multi-page switching. According to the number of data items displayed on each page defined by the page, the number of data to be displayed can be automatically switched.

2. Click the search button to start the search

Clicking the search button and starting the search should be the most common, common, and easiest way to search. Bind an event to the search button, click the search and send a request to the backend, and the frontend can display it on the page according to the return value of the backend, so I won’t repeat it here.

Vue front-end and back-end interaction links: 3. Vue front-end and back-end interaction (easy entry to vue)

Summarize

This article introduces several common implementation methods of the search box. The filter method I am using is especially recommended. The actual test is very easy to use and very simple.
hope its good for U.S!

Vue front end: realization of several search box functions