区域筛选添加截流函数

miniprogram/pages/areaSelect/areaSelect.ts

 import { baseFetch } from '../../api/fetch';
+import { delay } from '../../utils/util';
 
 // miniprogram/pages/areaSelect/areaSelect.js
 Page({
@@ -43,7 +44,7 @@ Page({
             let index = res.data.findIndex(
               item => item.id == this.data.selected,
             );
-            console.log(this.data.selected,index)
+            console.log(this.data.selected, index);
             if (index > -1) {
               this.setData({
                 selectedIndex: index,
@@ -64,10 +65,20 @@ Page({
   inputHandle(e) {
     const { value } = e.detail;
     console.log(e, value);
+    delay(() => {
+      this.getFilterListByName(value);
+    }, 500);
+  },
+  confirmHandle(e) {
+    const { value } = e.detail;
+    console.log(e, value);
+    this.getFilterListByName(value);
+  },
+  getFilterListByName(name: string) {
     let filterList = [];
-    if (value) {
+    if (name) {
       filterList = this.data.areaList.filter(item =>
-        item['areaName'].includes(value),
+        item['areaName'].includes(name),
       );
     } else {
       filterList = this.data.areaList;

miniprogram/pages/areaSelect/areaSelect.wxml

 <!-- miniprogram/pages/areaSelect/areaSelect.wxml -->
 <view class="areaselect-pickBox">
   <view class="areaselect-pickFilter">
-    <input class="areaselect-pickInput" type="text" bindconfirm="inputHandle" />
+    <input class="areaselect-pickInput" type="text" bindinput="inputHandle" bindconfirm="confirmHandle" />
     <view class="areaselect-pickBtn" bindtap="bindPickerChange">确认</view>
   </view>
   <view class="areaselect-list">

miniprogram/pages/components/AreaSelect/AreaSelect.ts

+import { delay } from "../../../utils/util";
+
 // pages/components/AreaSelect/AreaSelect.js
 Component({
   properties: {
@@ -70,15 +72,24 @@ Component({
     inputHandle(e) {
       const { value } = e.detail;
       console.log(e, value);
+      delay(() => {
+        this.getFilterListByName(value);
+      }, 500);
+    },
+    confirmHandle(e) {
+      const { value } = e.detail;
+      console.log(e, value);
+      this.getFilterListByName(value);
+    },
+    getFilterListByName(name: string) {
       let filterList = [];
-      if (value) {
+      if (name) {
         filterList = this.data.range.filter(item =>
-          item[this.data.rangeKey].includes(value),
+          item[this.data.rangeKey].includes(name),
         );
       } else {
         filterList = this.data.range;
       }
-
       this.setData({
         filterList,
       });

miniprogram/pages/components/AreaSelect/AreaSelect.wxml

@@ -12,7 +12,7 @@
   <view class="areaselect-pickView {{showPickerView?'show':''}}" bindtap="maskClickHandle">
     <view class="areaselect-pickBox {{showPickerView?'show':''}}" catchtap="innerClickHandle">
       <view wx:if="{{showPickerView}}" class="areaselect-pickFilter">
-        <input class="areaselect-pickInput" type="text" bindconfirm="inputHandle" />
+        <input class="areaselect-pickInput" type="text" bindinput="inputHandle" bindconfirm="confirmHandle" />
         <view class="areaselect-pickBtn" bindtap="bindPickerChange">确认</view>
       </view>
       <view class="areaselect-list">

miniprogram/utils/util.js

@@ -33,4 +33,11 @@ var joinComma = function (num) {
     }
     return result.join('');
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXRpbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbInV0aWwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFBQSxvQkFBMkIsSUFBVTtJQUNuQyxJQUFNLElBQUksR0FBRyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDaEMsSUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLFFBQVEsRUFBRSxHQUFHLENBQUMsQ0FBQztJQUNsQyxJQUFNLEdBQUcsR0FBRyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDM0IsSUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQzdCLElBQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztJQUNqQyxJQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7SUFFakMsTUFBTSxDQUFDLENBQ0wsQ0FBQyxJQUFJLEVBQUUsS0FBSyxFQUFFLEdBQUcsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxZQUFZLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDO1FBQzlDLEdBQUc7UUFDSCxDQUFDLElBQUksRUFBRSxNQUFNLEVBQUUsTUFBTSxDQUFDLENBQUMsR0FBRyxDQUFDLFlBQVksQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FDbkQsQ0FBQztBQUNKLENBQUM7QUFiRCxnQ0FhQztBQUVELElBQU0sWUFBWSxHQUFHLFVBQUMsQ0FBUztJQUM3QixJQUFNLEdBQUcsR0FBRyxDQUFDLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDekIsTUFBTSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxHQUFHLEdBQUcsR0FBRyxDQUFDO0FBQ2xDLENBQUMsQ0FBQztBQUVXLFFBQUEsV0FBVyxHQUFHLFVBQUMsQ0FBUztJQUNuQyxJQUFNLEdBQUcsR0FBRyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ3pCLElBQUksTUFBTSxHQUFHLEdBQUcsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDNUIsTUFBTSxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxHQUFHLEdBQUcsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDO0FBQ2hELENBQUMsQ0FBQztBQUVGLElBQU0sU0FBUyxHQUFHLFVBQUMsR0FBVztJQUM1QixJQUFJLE1BQU0sR0FBRyxFQUFFLEVBQ2IsT0FBTyxHQUFHLENBQUMsQ0FBQztJQUNkLEdBQUcsQ0FBQyxDQUFDLElBQUksS0FBSyxHQUFHLEdBQUcsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFLEtBQUssSUFBSSxDQUFDLEVBQUUsS0FBSyxFQUFFLEVBQUUsQ0FBQztRQUNyRCxPQUFPLEVBQUUsQ0FBQztRQUNWLElBQU0sT0FBTyxHQUFHLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUMzQixNQUFNLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQ3hCLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxPQUFPLEdBQUcsQ0FBQyxDQUFDLElBQUksS0FBSyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDakMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUN0QixDQUFDO0lBQ0gsQ0FBQztJQUNELE1BQU0sQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDO0FBQ3pCLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBmdW5jdGlvbiBmb3JtYXRUaW1lKGRhdGU6IERhdGUpOiBzdHJpbmcge1xuICBjb25zdCB5ZWFyID0gZGF0ZS5nZXRGdWxsWWVhcigpO1xuICBjb25zdCBtb250aCA9IGRhdGUuZ2V0TW9udGgoKSArIDE7XG4gIGNvbnN0IGRheSA9IGRhdGUuZ2V0RGF0ZSgpO1xuICBjb25zdCBob3VyID0gZGF0ZS5nZXRIb3VycygpO1xuICBjb25zdCBtaW51dGUgPSBkYXRlLmdldE1pbnV0ZXMoKTtcbiAgY29uc3Qgc2Vjb25kID0gZGF0ZS5nZXRTZWNvbmRzKCk7XG5cbiAgcmV0dXJuIChcbiAgICBbeWVhciwgbW9udGgsIGRheV0ubWFwKGZvcm1hdE51bWJlcikuam9pbignLScpICtcbiAgICAnICcgK1xuICAgIFtob3VyLCBtaW51dGUsIHNlY29uZF0ubWFwKGZvcm1hdE51bWJlcikuam9pbignOicpXG4gICk7XG59XG5cbmNvbnN0IGZvcm1hdE51bWJlciA9IChuOiBudW1iZXIpID0+IHtcbiAgY29uc3Qgc3RyID0gbi50b1N0cmluZygpO1xuICByZXR1cm4gc3RyWzFdID8gc3RyIDogJzAnICsgc3RyO1xufTtcblxuZXhwb3J0IGNvbnN0IGZvcm1hdFByaWNlID0gKG46IG51bWJlcikgPT4ge1xuICBjb25zdCBzdHIgPSBuLnRvRml4ZWQoMik7XG4gIGxldCBzdHJBcnIgPSBzdHIuc3BsaXQoJy4nKTtcbiAgcmV0dXJuIGpvaW5Db21tYShzdHJBcnJbMF0pICsgJy4nICsgc3RyQXJyWzFdO1xufTtcblxuY29uc3Qgam9pbkNvbW1hID0gKG51bTogc3RyaW5nKSA9PiB7XG4gIHZhciByZXN1bHQgPSBbXSxcbiAgICBjb3VudGVyID0gMDtcbiAgZm9yIChsZXQgaW5kZXggPSBudW0ubGVuZ3RoIC0gMTsgaW5kZXggPj0gMDsgaW5kZXgtLSkge1xuICAgIGNvdW50ZXIrKztcbiAgICBjb25zdCBlbGVtZW50ID0gbnVtW2luZGV4XTtcbiAgICByZXN1bHQudW5zaGlmdChlbGVtZW50KTtcbiAgICBpZiAoIShjb3VudGVyICUgMykgJiYgaW5kZXggIT0gMCkge1xuICAgICAgcmVzdWx0LnVuc2hpZnQoJywnKTtcbiAgICB9XG4gIH1cbiAgcmV0dXJuIHJlc3VsdC5qb2luKCcnKTtcbn07XG4iXX0=
\ No newline at end of file
+exports.delay = (function () {
+    var timer = 0;
+    return function (callback, ms) {
+        clearTimeout(timer);
+        timer = setTimeout(callback, ms);
+    };
+})();
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXRpbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbInV0aWwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFBQSxvQkFBMkIsSUFBVTtJQUNuQyxJQUFNLElBQUksR0FBRyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDaEMsSUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLFFBQVEsRUFBRSxHQUFHLENBQUMsQ0FBQztJQUNsQyxJQUFNLEdBQUcsR0FBRyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDM0IsSUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQzdCLElBQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztJQUNqQyxJQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7SUFFakMsTUFBTSxDQUFDLENBQ0wsQ0FBQyxJQUFJLEVBQUUsS0FBSyxFQUFFLEdBQUcsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxZQUFZLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDO1FBQzlDLEdBQUc7UUFDSCxDQUFDLElBQUksRUFBRSxNQUFNLEVBQUUsTUFBTSxDQUFDLENBQUMsR0FBRyxDQUFDLFlBQVksQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FDbkQsQ0FBQztBQUNKLENBQUM7QUFiRCxnQ0FhQztBQUVELElBQU0sWUFBWSxHQUFHLFVBQUMsQ0FBUztJQUM3QixJQUFNLEdBQUcsR0FBRyxDQUFDLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDekIsTUFBTSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxHQUFHLEdBQUcsR0FBRyxDQUFDO0FBQ2xDLENBQUMsQ0FBQztBQUVXLFFBQUEsV0FBVyxHQUFHLFVBQUMsQ0FBUztJQUNuQyxJQUFNLEdBQUcsR0FBRyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ3pCLElBQUksTUFBTSxHQUFHLEdBQUcsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDNUIsTUFBTSxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxHQUFHLEdBQUcsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDO0FBQ2hELENBQUMsQ0FBQztBQUVGLElBQU0sU0FBUyxHQUFHLFVBQUMsR0FBVztJQUM1QixJQUFJLE1BQU0sR0FBRyxFQUFFLEVBQ2IsT0FBTyxHQUFHLENBQUMsQ0FBQztJQUNkLEdBQUcsQ0FBQyxDQUFDLElBQUksS0FBSyxHQUFHLEdBQUcsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFLEtBQUssSUFBSSxDQUFDLEVBQUUsS0FBSyxFQUFFLEVBQUUsQ0FBQztRQUNyRCxPQUFPLEVBQUUsQ0FBQztRQUNWLElBQU0sT0FBTyxHQUFHLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUMzQixNQUFNLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQ3hCLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxPQUFPLEdBQUcsQ0FBQyxDQUFDLElBQUksS0FBSyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDakMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUN0QixDQUFDO0lBQ0gsQ0FBQztJQUNELE1BQU0sQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDO0FBQ3pCLENBQUMsQ0FBQztBQUNXLFFBQUEsS0FBSyxHQUFHLENBQUM7SUFDcEIsSUFBSSxLQUFLLEdBQUcsQ0FBQyxDQUFDO0lBQ2QsTUFBTSxDQUFDLFVBQVMsUUFBb0IsRUFBRSxFQUFVO1FBQzlDLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNwQixLQUFLLEdBQUcsVUFBVSxDQUFDLFFBQVEsRUFBRSxFQUFFLENBQUMsQ0FBQztJQUNuQyxDQUFDLENBQUM7QUFDSixDQUFDLENBQUMsRUFBRSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGZ1bmN0aW9uIGZvcm1hdFRpbWUoZGF0ZTogRGF0ZSk6IHN0cmluZyB7XG4gIGNvbnN0IHllYXIgPSBkYXRlLmdldEZ1bGxZZWFyKCk7XG4gIGNvbnN0IG1vbnRoID0gZGF0ZS5nZXRNb250aCgpICsgMTtcbiAgY29uc3QgZGF5ID0gZGF0ZS5nZXREYXRlKCk7XG4gIGNvbnN0IGhvdXIgPSBkYXRlLmdldEhvdXJzKCk7XG4gIGNvbnN0IG1pbnV0ZSA9IGRhdGUuZ2V0TWludXRlcygpO1xuICBjb25zdCBzZWNvbmQgPSBkYXRlLmdldFNlY29uZHMoKTtcblxuICByZXR1cm4gKFxuICAgIFt5ZWFyLCBtb250aCwgZGF5XS5tYXAoZm9ybWF0TnVtYmVyKS5qb2luKCctJykgK1xuICAgICcgJyArXG4gICAgW2hvdXIsIG1pbnV0ZSwgc2Vjb25kXS5tYXAoZm9ybWF0TnVtYmVyKS5qb2luKCc6JylcbiAgKTtcbn1cblxuY29uc3QgZm9ybWF0TnVtYmVyID0gKG46IG51bWJlcikgPT4ge1xuICBjb25zdCBzdHIgPSBuLnRvU3RyaW5nKCk7XG4gIHJldHVybiBzdHJbMV0gPyBzdHIgOiAnMCcgKyBzdHI7XG59O1xuXG5leHBvcnQgY29uc3QgZm9ybWF0UHJpY2UgPSAobjogbnVtYmVyKSA9PiB7XG4gIGNvbnN0IHN0ciA9IG4udG9GaXhlZCgyKTtcbiAgbGV0IHN0ckFyciA9IHN0ci5zcGxpdCgnLicpO1xuICByZXR1cm4gam9pbkNvbW1hKHN0ckFyclswXSkgKyAnLicgKyBzdHJBcnJbMV07XG59O1xuXG5jb25zdCBqb2luQ29tbWEgPSAobnVtOiBzdHJpbmcpID0+IHtcbiAgdmFyIHJlc3VsdCA9IFtdLFxuICAgIGNvdW50ZXIgPSAwO1xuICBmb3IgKGxldCBpbmRleCA9IG51bS5sZW5ndGggLSAxOyBpbmRleCA+PSAwOyBpbmRleC0tKSB7XG4gICAgY291bnRlcisrO1xuICAgIGNvbnN0IGVsZW1lbnQgPSBudW1baW5kZXhdO1xuICAgIHJlc3VsdC51bnNoaWZ0KGVsZW1lbnQpO1xuICAgIGlmICghKGNvdW50ZXIgJSAzKSAmJiBpbmRleCAhPSAwKSB7XG4gICAgICByZXN1bHQudW5zaGlmdCgnLCcpO1xuICAgIH1cbiAgfVxuICByZXR1cm4gcmVzdWx0LmpvaW4oJycpO1xufTtcbmV4cG9ydCBjb25zdCBkZWxheSA9IChmdW5jdGlvbigpIHtcbiAgbGV0IHRpbWVyID0gMDtcbiAgcmV0dXJuIGZ1bmN0aW9uKGNhbGxiYWNrOiAoKSA9PiB2b2lkLCBtczogbnVtYmVyKSB7XG4gICAgY2xlYXJUaW1lb3V0KHRpbWVyKTtcbiAgICB0aW1lciA9IHNldFRpbWVvdXQoY2FsbGJhY2ssIG1zKTtcbiAgfTtcbn0pKCk7XG4iXX0=
\ No newline at end of file

miniprogram/utils/util.ts

@@ -37,3 +37,10 @@ const joinComma = (num: string) => {
   }
   return result.join('');
 };
+export const delay = (function() {
+  let timer = 0;
+  return function(callback: () => void, ms: number) {
+    clearTimeout(timer);
+    timer = setTimeout(callback, ms);
+  };
+})();