How does element-ui realize the search function? What is the idea?

Search implementation ideas

Get the value of the input box (also called keyword) fuzzy search
Pass the obtained value to the background through the ajax request search interface through event triggering
The back-end server receives browser requests through server-side languages (node, PHP, Java)
Back-end language query database (Mysql, mongodb)
Return the query result to the browser according to the json format agreed by the search interface
Render the returned results to the page through the front-end JS

Performance optimization: Anti-shake or throttling can be used to reduce server pressure eg:lodash

<div class="search">
        <el-input
          placeholder="请输入内容"
          v-model="input3"
          v-model.trim="pageInfo.query"
          class="input-with-select"
          clearable
        >
          <el-button slot="append" icon="el-icon-search" @click="searchUser"></el-button>
        </el-input>
        <el-button class="aa" type="primary"">添加用户</el-button>
</div>

data value

  input3: "",

// 搜索   
    searchUser: _.debounce(
      function() {
       // 调用获取全部数据的接口
        this.getUserList();  
      },
      3000,
      { leading: false }
    ),

_.throttle is lodash's throttling method,
but the search is best to use anti-shake:_.debounce()

Use of lodash

npm install lodash -D
var _ = require('lodash');

import _ from 'lodash'

Then it can be used in the vue component

How does element-ui realize the search function? What is the idea?

Guess you like