小程序实现搜索框

搜索框

wxml

<view class="content">
  <view class="section" style="display:flex;flex-direction:row;">
    <text style="color:red;">*</text>
    本科院校：
  <view style="display:flex;flex-direction:column;">
    <input type="text" placeholder="请选择院校" maxlength='20' bindinput="inputTyping" name='academy' bindblur="inputblur" value="{{menuval}}" data-id="{{menuid}}"/>
    
<!--提示下拉框,这里用boos直聘的哪种方法把-->
    <block wx:for="{{menuArr}}">
    <view hidden="{{menu}}" style="width:180px;height:20px;border-bottom:1px solid black;" bindtap="clickyx" data-id="{{item.id}}" data-name="{{item.academy_name}}">{{item.academy_name}}</view>
    </block>
<!--end提示下拉框-->

  </view>
  </view>

js

Page({

  data: {
    menuArr:[],
    menu:true,
    menuLength:null,
    menuid:null,
    menuval:null
  },


/**
 * 内容改变事件-本科院校
 */
  inputTyping:function(e){
    var val = e.detail.value;
    console.log(val)
  
    var that = this;
    if (e.detail.value){
      //输入一个字请求一次 是不是浪费啊 

    wx.request({
      url: ' getYxNmae',
      method:'post',
      data: {'name':val},
      success:function(res){
        console.log(res.data.data)
        if (res.data.data){
          that.setData({
            menu: false,
            menuArr: res.data.data
          })
        }
      }
    })
    
    }else{
      this.setData({
        menu: true
      })
    }
    
    
  },
  //失焦
  inputblur:function(e){
    this.setData({
      menu: true
    })
  },
  //选择
  clickyx:function(e){
    var _id = e.target.dataset.id;
    var _name = e.target.dataset.name;
    this.setData({
      menuid: _id,
      menuval: _name,
    })
    
  }

})

tp5.1

/**
     * 获取院校名称
     */
    public function getYxNmae()
    {
        $name = input('name');
        $where[] = ['academy_name','like','%'.$name.'%'];
        $yxAll = WxYxlist::field(['id','academy_name'])->where($where)->select()->toArray();
        $count = count($yxAll);
        if($count>10){
            $yxAll = array_slice($yxAll,0,10);
        }
        return JsonService::success('ok',$yxAll);
    }
    ```