在苹果浏览器中汉字触发自动搜索不好用！

Question

自动搜索这块的代码在电脑上都好用，在苹果手机上，输入英文会自动搜索，但是汉子就不起作用了，看了网上的方式，也不好用，大家帮忙看看。onkeyup这里要怎么修改，才能在苹果手机的浏览器里一样可以汉字输入触发自动搜索呢？

  <div class="input-rrow">
                                <label>所属分销</label>
                                <input type="hidden" id="fmdata[pid]" name="fmdata[pid]" value="">
                                <input type="text" id="fmdata[pid_label]" name="fmdata[cname]" title="您所属的经纪公司，没有可不填"   maxLength="50"  value="{cmane}"  placeholder="您所属的经纪公司，没有可不填" autocomplete="off"/>

                            </div>

<script type="text/javascript">
            var fmdata = 'fmdata';
            function createobj(element,type,value,id){
                var e = document.createElement(element);
                e.type = type;
                e.value = value;
                e.id = id;
                return e;
            }
            function set_select(obj,value,dochange){
                if(obj==null) return;
                for(var j=0;j<obj.options.length;j++){
                    if(obj.options[j].value == value){
                        obj.options[j].selected = true;    
                        if(dochange && obj.onchange)obj.onchange();
                    }    
                }
            }
            function closediv(){
                //alert('['+pid.value+']');
                divin.nextSibling.style.display = 'none';
                divin.style.display="none";
                if(pid.value.length==0 || pid.value=='0'){ 
                    plable.value = '';
                    //plable.onfocus();
                    plable.onblur();
                } // ?? 会不会，此项为空也可提交？
            }
            var plable = $id(fmdata+'[pid_label]');
            plable.setAttribute('autocomplete','off');
            var divout = document.createElement('DIV');
            var pid = document.getElementsByName('fmdata[pid]')[0];
            with(divout.style){position =     'absolute';left = 0+'px';top = 40+'px';zIndex = 100;}
            var showdiv = "    <div style=\"border: 1px solid rgb(102, 102, 102); position: absolute; z-index: 1000; overflow-y: scroll; height: 200px; width: 320px; background-color: rgb(255, 255, 255);display:none;\" id=\"SuggestionDiv\"></div><iframe frameborder=\"0\" style=\"border: 0px solid rgb(102, 102, 102); position: absolute; z-index: 100; overflow-y: scroll; height: 200px; width: 320px; background-color: rgb(255, 255, 255);display:none;\"></iframe>";
            divout.innerHTML = showdiv;
            plable.parentNode.insertBefore(divout,plable.nextSibling);
            var divin = $id('SuggestionDiv');
            var aj=Ajax("HTML","loading");
            plable.onkeyup = function(){
                var keywords = plable.value;
                //$exurl用于扩展
                //onpropertychange 
                //oninput
                var urlbase = 'ajax=member_list';
                var urlpara = '&keywords='+encodeURIComponent(keywords);
                var urlfull = CMS_ABS + uri2MVC(urlbase+urlpara);
                //console.log(urlfull); // &datatype=js|json 
                aj.post(urlfull,'',function(re){
                    eval("var s = "+re+";"); 
                    divin.style.display = '';
                    divin.nextSibling.style.display = '';
                    var str="<table width=\"280px\" cellspacing=\"0\" cellpadding=\"4\" border=\"0\" bgcolor=\"#ffffff\" class=\"search_select\" id=\"Suggestion\" style=\"top: -1px;\";><tbody><tr>";
                    str += "<td height=\"16\" align=\"center\" style=\"color: rgb(153, 153, 153); padding-left: 3px; background-repeat: repeat-x; background-position: center center;\" >请点击选择（没有请点[关闭]）</td>";
                    str += "<td align='right'><a style=\"cursor:pointer;text-decoration:none; color:red;\" onclick=\"closediv()\">关闭</a></td></tr>"
                    for(i=0;i<s.length;i++){
                        str+="<tr onclick=\"sendmid("+i+")\" style=\"cursor:pointer; \"><td style=\"color:#09C;padding: 8px;\" >"+s[i].cmane+"</td></tr>";    
                    }
                    if(s.length == 0){
                        str += "<tr style=\"cursor:pointer\"><td index=\"1\" style=\"padding: 5px; color: rgb(51, 51, 51);\" ><span style=\"color: rgb(0, 101, 181);width:280px; display:block; float:left;\">无相关,请重输入关键词！</span></td></tr>";    
                    }
                    str+="</tbody></table>";
                    divin.innerHTML = str;

                function sendmid(i){
                    pid.value = s[i].mid;
                    plable.value = s[i].cmane;
                    divin.style.display="none";
                    divin.nextSibling.style.display = 'none';
                    plable.onfocus(); //没有这句,如果为空状态下选一个项目,选取后认证提示不会消失
                }
                window.sendmid=sendmid;    
                });
            }
            </script>

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

根据您的描述，问题在于在苹果手机的浏览器中，汉字无法正常触发自动搜索。为了解决这个问题，您可以尝试以下方法：

1. 使用JavaScript的Array.prototype.filter()函数来过滤掉空值和空白字符。
2. 在set_select()函数中，使用this关键字代替obj参数，以确保在所有情况下都能正确设置选择。

以下是修改后的代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
  .search_select {
    width: 280px;
    border-collapse: collapse;
    margin-bottom: 20px;
  }

  .search_select th {
    text-align: left;
    padding: 10px;
    font-size: 14px;
    color: #333;
    border-top: 1px solid #ccc;
  }

  .search_select td {
    text-align: left;
    padding: 10px;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #ccc;
  }
</style>
</head>
<body>
<!-- 搜索框 -->
<input type="text" id="search" onkeyup="search()" placeholder="请输入搜索内容">

<!-- 提交按钮 -->
<button id="submit">搜索</button>

<!-- 自动搜索区域 -->
<div id="autoSearchArea" style="display: none;">
  <!-- 自动搜索结果 -->
  <div id="autoSearchResult"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#search').on('keyup', function() {
      search();
    });

    function search() {
      var input = $('#search').val().toLowerCase();

      var results = [];
      $('table.search_select tr').each(function(index, row) {
        var colText = $(row).find('td:first-child').text().toLowerCase();
        if (colText.indexOf(input) !== -1) {
          results.push($(row));
        }
      });

      $('#autoSearchArea').empty();
      if (results.length === 0) {
        $('#autoSearchResult').html('<p>未找到匹配项。</p>');
      } else {
        $('#autoSearchResult').html('');
        results.forEach(function(resultRow) {
          $('#autoSearchArea').append(resultRow.find('td:last-child').clone());
        });
      }
    }
  });
</script>
</body>
</html>

这段代码将创建一个包含搜索框、提交按钮和自动搜索区的网页。当用户在搜索框中输入文本时，点击提交按钮或按Enter键，都会调用search()函数进行搜索。这个函数首先获取用户的输入，并将其转换为小写。然后，它遍历所有的表格行，查找与输入相匹配的内容。如果有任何匹配项，它们会被添加到一个数组中。最后，这些匹配项被渲染到自动搜索结果区。