jQuery UI 自动完成功能在 iOS 中不起作用

Posted 2023-05-08

【中文标题】jQuery UI 自动完成功能在 iOS 中不起作用

【英文标题】：jQuery UI Autocomplete is not working in iOS

【发布时间】：2020-10-26 22:53:21

【问题描述】：

我的代码在每个浏览器和设备上都能正常工作。 但在 ios 中，它会显示出来，我可以在其中输入文本，但它不起作用。不适用于 Chrome 或 Safari。 我该怎么办？我应该修改我的代码还是应该使用完全不同的库？

<script type="text/javascript" src="./js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>

<input placeholder="" type="text" id="autoComplete" class="form-control">

$("#autoComplete").autocomplete(
    source: function(req, response)  
    var re = $.ui.autocomplete.escapeRegex(req.term); 
    var matcher = new RegExp(re);
    response(
            $.grep( agenciesBasedOnLocation, function(item)
            
                return matcher.test(item.label); 
            ) 
        ); 
    ,
    minLength:0,
    select: function( event, ui ) 
    
        $("#autoComplete").val( ui.item.label);
        $("#agencies").val( ui.item.id);           
        return false;
    

)
.data( "ui-autocomplete" )._renderItem = function( ul, item ) 
    return $( "<li>" )
        .append( "<span>" + item.label + 
            "</span><br><span style='font-size: 80%;'>Branch code: " + item.branch_code + "</span>" +
            "<br><span style='font-size: 80%;'>Address: " + item.address + "</span>" )
        .appendTo( ul );
;

【问题讨论】：

当您说您的代码在 iOS 上根本无法运行时，您的意思是自动完成下拉菜单没有出现吗？在 iOS 上，您仍然可以在输入字段中输入文本吗？

它出现了，我仍然可以在其中输入文本，但它不起作用。

我编辑了我的问题

看这个例子：jqueryui.com/autocomplete/#custom-data 可以看到Item的结构使用了<li>，然后是<div>。我建议您将 <span> 项目包装在一个 <div> 中以获得更好的结果。

我有类似的问题，对我来说，自动完成下拉菜单甚至没有出现在 iOS 的 iphone / 平板电脑上。在 Chrome + Safari 中都没有。

【参考方案1】：

考虑下面的代码。

$("#autoComplete").autocomplete(
    source: function(req, response) 
      var re = $.ui.autocomplete.escapeRegex(req.term);
      var matcher = new RegExp(re);
      response(
        $.grep(agenciesBasedOnLocation, function(item) 
          return matcher.test(item.label);
        )
      );
    ,
    minLength: 0,
    select: function(event, ui) 
      $("#autoComplete").val(ui.item.label);
      $("#agencies").val(ui.item.id);
      return false;
    
  )
  .data("ui-autocomplete")._renderItem = function(ul, item) 
    return $("<li>")
      .append("<div><span>" + item.label + "</span><br><span style='font-size: 80%;'>Branch code: " + item.branch_code + "</span>" +
        "<br><span style='font-size: 80%;'>Address: " + item.address + "</span></div>")
      .appendTo(ul);
  ;

我还会考虑使用带有 SPAN 元素的类来帮助设置它们的样式。

$("#autoComplete").autocomplete(
    source: function(req, response) 
      var re = $.ui.autocomplete.escapeRegex(req.term);
      var matcher = new RegExp(re);
      response(
        $.grep(agenciesBasedOnLocation, function(item) 
          return matcher.test(item.label);
        )
      );
    ,
    minLength: 0,
    select: function(event, ui) 
      $("#autoComplete").val(ui.item.label);
      $("#agencies").val(ui.item.id);
      return false;
    
  )
  .data("ui-autocomplete")._renderItem = function(ul, item) 
    var cnt = $("<div>");
    $("<span>", 
      class: "item-label"
    ).html(item.label).appendTo(cnt);
    $("<span>", 
      class: "item-branch-code"
    ).html(item.branch_code).appendTo(cnt);
    $("<span>", 
      class: "item-address"
    ).html(item.address).appendTo(cnt);
    return $("<li>")
      .append(cnt)
      .appendTo(ul);
  ;

然后使用CSS

.item-label, .item-branch-code, .item-address 
  display: block;
  width: 100%;


.item-branch-code, .item-address 
  font-size: 80%;