首页 > 其他 > 详细

使用input事件进行搜索

时间:2021-05-31 21:43:41      阅读:21      评论:0      收藏:0      [点我收藏+]

使用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事件进行搜索

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!