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

Question

我的代码在每个浏览器和设备上都运行良好。 但是在 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 );
};

Answer 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%;
}