Effect:

1, when the input content in the input box begins to filter, the drop-down box shows the data after screening

2. If no condition is met, no data is displayed

3. After clearing the contents of the input box, the drop-down box displays all the data

Ideas:

1. Set the onInput event to the search box. Oninput: triggered when the value of the input changes (unlike onchange, which does not wait until it loses focus)

2. Pass the contents of the input box and the data of the drop-down box to the event function

3. According to the judgment conditions, filter the qualified data through the filter, assign the value to the new array, and then reassign the new array to the traversal number group of Option.

Code implementation:

In the template code:


<el-select multiple v-model='selectedArray' value-key="LocationCode" @change='changeSelect' placeholder='Please select' data-live-search="true"> <! The value of the selected value is the same as that of the key in the option.<el-input class="search_input" type="text" v-model="searchText" @input="focusCustomer()" clearable placeholder="Search" ></el-input>
 
   <el-option v-for='item in listt' :key='item.LocationCode' :label='item.LocationName' :value='item'></el-option>
 
</el-select>
Copy the code

Method:


focusCustomer(){
          // Options is the data requested by the back end
	   // reg: trim removes whitespace around input
      var reg = this.searchText.trim()
        // If there is a value in the input box
      if (reg.length > 0) {
 
         //newArr is an empty array declared in data
        this.newArr = this.options.filter(item= > {
 
           // Check whether the input box exists
          var numberfliter = (item.LocationName.toUpperCase()).indexOf(reg.toUpperCase())
           // If the value is 0, it exists, and -1 does not exist
          if (numberfliter == 0) {
            // Directly return the array that has the same for newArr
            return item
          }
        })
        // listt is an array of option variables
        this.listt= this.newArr
      }else {
        // If there is no search term, all data is displayed
        this.listt= this.options
      }
}
Copy the code

Ps: Be happy every day!