vue模糊搜索

vue实现模糊搜索

根据名称进行关键词搜索

template>
  <div class="wrap">
    <div class="searchInput">
      <input type="text" placeholder="请输入产品名称或PN" v-model="searchData">
      <button @click="search" id="btn">搜索</button>
    </div>
    <div class="content">
      <div class="title">
        <div>id</div>
        <div>name</div>
        <div>username</div>
        <div>email</div>
        <!-- <div>phone</div> -->
      </div>
      <div v-for="(ele,index) in list" :key="index">
        <div class="info">
          <div>{{ele.id}}</div>
          <div>{{ele.name}}</div>
          <div>{{ele.username}}</div>
          <div>{{ele.email}}</div>
          <!-- <div>{{ele.phone}}</div> -->
        </div>
      </div>
      
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchData: "",
      list:[],
      modules: [],
      searchKey: {},
    }
  },
  created() {
          this.getData();
    },
  mounted() {
       document.onkeydown = function (event) {  // 回车实现点击功能
        var e = event || window.event;
        if (e && e.keyCode == 13) { 
            $("#btn").click(); 
        }
    }; 
  },
  watch: { // watch实时监控输入内容,如果没有任何内容,则显示整个列表
    searchData(current, old) {
      let that = this;
      if(current == ''){
        that.list = that.modules
      }
    } 
  },
  methods:{
    search() {
      let that = this;
      if (that.searchData === '' || typeof(that.searchData)=="undefined")
      {
        that.list=that.modules;
      }else{
        that.list=[]
        that.modules.map(function(item) {
          console.log(typeof item.id);
        if (item.name.search(that.searchData) != -1) { // 筛选条件
          that.list.push(item);
        }
      });
      }
    },
    getData(){
      let that = this;
      // http://jsonplaceholder.typicode.com/users
      this.$http.get('/users').then(function(res){ // 获取数据 利用代理服务器获取
        console.log(res)
          if(res.status == 200){
            that.modules = res.data;
            console.log(res.data)
            that.list=that.modules;
          }else{
            alert('服务异常！');
          }
      },function(res){
          // alert(res.status);
      });
    },
  }
}
</script>

* {
    padding:0;
    margin: 0;
  }
  input,button {
    background:none;  
	  outline:none;  
	border:0px;
  }
  a{
    text-decoration: none;
  }
    .wrap {
    width: 100%;
    height: 100%;
    position: relative;
    min-width: 1000px;
    }
    .searchInput {
      width: 542px;
      height: 52px;
      /* border: 1px solid red; */
      margin: 0 auto;
      box-sizing: border-box;
    }
    .searchInput input {
      border: 1px solid #8a8a8a;
      width: 420px;
      height: 53px;
      line-height: 50px;
      box-sizing: border-box;
      padding-left: 40px;
      font-size: 14px;
      background:url('./img/search.png') no-repeat 1% 45%;
      background-size: 6%;
    }
    .searchInput button {
      width: 100px;
      height: 53px;
      line-height: 50px;
      font-size: 16px;
      margin-left: 4px;
      border: 1px solid #8a8a8a;
      background: #bfbfbf;
      border-radius: 6px;
      color: #fff;
      cursor: pointer;
    }
    .content {
      width: 1200px;
      /* border: 1px solid red; */
      margin: 60px auto;
    }
    .title {
      height: 50px;
      width: 1200px;
      font-size: 0;
    }
    .title div {
      width: 230px;
      height: 50px;
      background: #9dc3e6;
      display: inline-block;
      font-size: 16px;
      border-right: 1px solid white;
      border-top: 1px solid white;
      line-height: 50px;
    }
    .info {
      height: 40px;
      width: 1200px;
      font-size: 0;
    }
    .info div {
      width: 230px;
      height: 40px;
      background: #eaeff7;
      display: inline-block;
      font-size: 16px;
      border-right: 1px solid white;
      border-top: 1px solid white;
      line-height: 40px;
    }

代理服务器配置 config中的index.js文件

  proxyTable: {
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',//请求的服务器地址
        changeOrigin: true, //是否跨域
        pathRewrite: {
         '^/api':'/'  //路径
        }
      }
    },

main.js中

import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)
Axios.defaults.baseURL = apiConfig.baseUrl;

在config中新建文件api.config.js
判断是测试环境还是服务器环境

const isPro = Object.is(process.env.NODE_ENV, 'production')

module.exports = {
    baseUrl: isPro ? 'http://jsonplaceholder.typicode.com/' : 'api/'
}

这样就可以实现一个简单的模糊搜索了,欢迎指正