码迷,mamicode.com
首页 > 其他好文 > 详细

使用input事件进行搜索

时间:2021-06-02 18:54:30      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:width   load   his   ext   none   close   img   spi   param   

使用input事件进行搜索时准时不准

<div class="m-wrapper03" id="app" v-cloak>
        <div class="close-hosmain close-pf">
            <div class="mycloose">
                <i class="mycloose-img" @click="getHospitalListBy"></i>
                <input type="text" placeholder="搜索医院" class="" style="width: 100%; background: none; font-size: 14px;" @input="searchHospital($event)">
            </div>
        </div>
</div>

<script type="text/javascript">
  var vm = new Vue({
  el: ‘#app‘,
  data: function () {
      return {
          name: ‘福州市‘,
          provinceCode: 350000,
          cityCode: 350100,
          hospitalList: [],
          prefixList: [],
          totalCount: 0,
          timeoutId: -1
      }
  },
  methods: {
      getHospitalListBy: function () {
          var that = this
          showLoading();
          let param = {
              "provinceCode": this.provinceCode,
              ‘cityCode‘: this.cityCode,
          }
          getHospitalListBy(param).then(function (res) {
              that.totalCount = res.total
              if (res.result) {
                  var result = res.result
                  if (result.length > 0) {
                      that.hospitalList = result;
                      for (var item of result) {
                          that.prefixList.push(item.prefix)
                      }
                  }
              }
          })
      },
      searchHospital: function (e) {
          this.prefixList = []
          this.hospitalList = []
          var that = this;
          var searchHosName = e.target.value
          showLoading();
          let param = {
              "provinceCode": this.provinceCode,
              ‘cityCode‘: this.cityCode,
          }
          if (that.timeoutId != -1) {
              clearTimeout(that.timeoutId)
          }
          if (searchHosName && searchHosName.trim() != ‘‘) {
              param[‘hosName‘] = searchHosName
          }
          that.timeoutId = setTimeout(function () {
              getHospitalListBy(param).then(function (res) {
                  that.totalCount = res.total
                  if (res.result) {
                      var result = res.result
                      if (result.length > 0) {
                          that.hospitalList = result;
                          for (var item of result) {
                              that.prefixList.push(item.prefix)
                          }
                      }
                  }
              })
          }, 500)
      }
  }
})
</script>

使用input事件进行搜索

标签:width   load   his   ext   none   close   img   spi   param   

原文地址:https://www.cnblogs.com/longma-ling/p/14831870.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!