javascript - jQuery UI 自动完成功能在 iOS 中不起作用
问题描述
我的代码在每个浏览器和设备上都运行良好。但在 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 );
};
解决方案
考虑以下代码。
$("#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%;
}