继这个问题jquery 自动完成，在同一字段中包含更多项目我试图循环自动完成功能 15 次。
$(function() {
for (i = 0; i < 15; i++) {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 1 );
}
$( "#town2"+i ).autocomplete({
source: "<?php echo $absolute_site . "autocomplete/autocompletetown.php" ?>",
select: function( event, ui ) {
var item = ui.item;
if(item) {
$("#country2"+i).val(item.country);
$(this).val(item.value +' is in ' + item.state);
return false;
}
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" +item.value + "," +item.state + "," + item.country + "</a>" )
.appendTo( ul );
};
}
});
它会自动完成 #town21、#town22、#town23 .... 字段，但不会自动完成 #country21、#country22 .... 字段。我的 for 循环可能在错误的地方......？谢谢！
您的代码无法工作，因为您遇到了典型的关闭问题。
当您执行代码时，循环：
for (i = 0; i < 15; i++) {
在第一次运行任何自动完成功能之前已完成。这意味着您的所有自动完成函数都将包含值 15 作为变量 i，这就是您的问题。您可以通过调试代码来验证这一点。
闭包的一个经典例子是：
for (var i = 1; i <= 5; i++) {
setTimeout(function() { console.log(i); }, 1000*i); // result: 6 6 6 6 6
}
如何避免这种情况？可能的解决方案之一是使用 IIFE。
来自 MDN：IIFE（立即调用函数表达式）：是一个 JavaScript 函数，一旦定义就运行。
因此，在您的情况下，您可以稍微更改一下代码，以便（我只重写了您感兴趣的部分）：
var townTags = [
{label: 'Miami', value: 'Miami', state: 'Florida', country: 'Florida'},
{label: 'Rome', value: 'Rome', state: 'Italy', country: 'Italy'},
{label: 'Paris', value: 'Paris', state: 'France', country: 'France'},
{label: 'Berlin', value: 'Berlin', state: 'Germany', country: 'Germany'}
];
$(function () {
for (i = 0; i < 15; i++) {
(function(i) { // start IIFE
$('#town2' + i).autocomplete({
source: townTags,
select: function (event, ui) {
var item = ui.item;
if (item) {
$("#country2" + i).val(item.country);
$(this).val(item.value + ' is in ' + item.state);
return false;
}
}
});
})(i); // end IIFE
}
});
<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<div class="ui-widget">
<label for="town20">Town: </label>
<input id="town20">
<label for="country20">Country: </label>
<input id="country20"><br>
<label for="town21">Town: </label>
<input id="town21">
<label for="country21">Country: </label>
<input id="country21"><br>
<label for="town22">Town: </label>
<input id="town22">
<label for="country22">Country: </label>
<input id="country22"><br>
<label for="town23">Town: </label>
<input id="town23">
<label for="country23">Country: </label>
<input id="country23"><br>
<label for="town24">Town: </label>
<input id="town24">
<label for="country24">Country: </label>
<input id="country24"><br>
<label for="town25">Town: </label>
<input id="town25">
<label for="country25">Country: </label>
<input id="country25"><br>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
