jquery 实现 input 下拉框模糊搜索及 IOS 的 keyup 兼容性问题解决

场景描述：

公司有很久以前用 jquery 开发的 h5 项目要更新，需要动态获取接口返回的数据列表，然后前端实现 input 框下拉模糊搜索功能。虽然不常用，由于测试过程中遇到了一个 安卓 / IOS 对键盘的 keyup 兼容性问题，还是简单记录一下

代码实现：

html 部分：

<input class="department" type="text" placeholder="请输入科室 / 病区" />
<ul class="departments_ul"></ul> 

js 部分：

$(function () {
	getDepartList(); // 获取科室列表
	departmentSearch(); // 科室模糊搜索开启
})

// 科室/病区 模糊搜索
function departmentSearch() {

  // 注意！！！这里开始用的是 keyup 事件监听，在安卓机没问题，但是在 IOS 浏览器中会不灵敏，存在兼容性问题，所以这里做了环境判断，安卓用 keyup ，IOS 用 input
  
  // IOS
  var bind_name = "input";
  
  // IE
  if (navigator.userAgent.indexOf("MSIE") != -1) {
    bind_name = "propertychange";
  }  
  
  // 安卓
  if (navigator.userAgent.match(/android/i) == "android"){
    bind_name = "keyup";
  } 
  
  // 模糊搜索
  $(".department").on(bind_name, function() {
    $(".departments_ul li").hide().filter(":contains("+ $(".department").val().trim() +")").show();
  })
  
  // 点击下拉项选中
  $(".departments_ul").on("click", "li", function() {
    var value = $(this).text();
    $(".department").val(value);
    $(".departments_ul li").hide();
  })
  
  // 点击其他区域隐藏科室列表
  $(".body").on("click", function() {
    $(".departments_ul li").hide();
  })
}

// 获取科室/病区列表
function getDepartList() {
  new AjaxRequest({
    type: 'GET',
    url: '你的url',
    contentType: '',
    succallBack: function (res) {
      if (res.status === '0') {
        const da = res.data
        
        // 重点！！！遍历数据动态添加 li
        $.each(da, function (index, value) {
          var name = da[index];
           var $li = "<li class='departments_item'>" + name + "</li>";
          $(".departments_ul").append($li);
        })
        $(".departments_ul li").hide();
      }
    },
    error: function (res) {
      console.log(res)
    },
  })
}