Example of El input carriage return search in elementui

Time:2021-7-30

Problem description

The previous article described fuzzy query association search, but generally speaking, fuzzy query association search is that after the user enters a keyword, the association related data is presented and the user can select one (of course, El select also has the multi selection function, as shown in the figure below, but some scenarios are not applicable). After the user selects a certain keyword, Display this piece of data to users; However, in some cases, users want to directly see that all associated data are directly presented on the page. For example, after the user enters the word “Wang”, all the data associated with the word “Wang” should be spread out on the page for the user to choose. At this time, the following method will be more applicable: bind the enter event to El input, and the user will directly press the enter key after entering the content in the input box, Send a request to get all the associated data in the background, and then render it on the page. Users can click whoever they want to see. After the user deletes all the contents of the input box, when the input content is empty, the user sends a request to return to the initial data state.

El select multi selection function rendering

Example of El input carriage return search in elementui

El input binding carriage return code

HTML part

<template>
  <div id="app">
    <!--  Use the bound carriage return event provided by Vue
    Trim is used to prevent users from randomly entering spaces -- >
    <el-input 
      v-model.trim="searchData"
      @keyup.enter.native="search"
    ></el-input>
  </div>
</template>

JS part

<script>
export default {
  name: "app",
  data() {
    return {
      searchData: "",
    };
  },
  watch:{
    //Listen to the input box. If there is nothing left, it will return to the default state
    searchData:function(newnew,oldold){
      if(newnew == ""){
        //Send a request to return to the initial list data state
        Console.log ("the search box is empty, and the initial state is restored");
      }
    }
  },
  methods: {
    search(){
      //Control it. If the user doesn't enter anything, he won't search
      if(this.searchData == ""){
        return
      }else{
        //Take the searchdata with you and send a request to get the associated data and present it in the page
        Console.log ("give back-end search with keywords", this. Searchdata);
      }
    }
  },
};
</script>

summary

In fact, the most important thing to write code is thinking. As long as you have ideas, you have directions. Basically, you can solve problems. The above code is mainly about ideas, and the implementation requirements can be flexible.