实现原生input搜索功能

<input

type="search" //至关重要

v-model="vanlueInput" //可以双向绑定取值

@keyup="searchKey"  //获取enter键

style="

outline: none;

width: 80%;

border: none;

font-size: 18px;

font-weight: bold;

color: #000;

"

/>

//css部分，去掉input ，search类型时自带的小箭头

input[type="search"]::-webkit-search-cancel-button {

-webkit-appearance: none; // 此处只是去掉默认的小×

}

//script部分

searchKey(e) {

console.log(e, e.keyCode, e.target.value);

      this.result_s = e.target.value;

      if (e.keyCode == 13) {

        console.log("===============我被触发了");

        if (e.target.value) {

          //发送请求

          return searchGood({ name: e.target.value }).then((res) => {

            if (res && res.code == 0 && res.data) {

              this.searchList = res.data;

            }

          });

        } else {

          alert("Please enter the product name");

        }

      }

     

    },