Jquery 自动完成 renderItem 在 1.12.1 版中不起作用
Jquery Autocomplete renderItem is not working v. 1.12.1
我在使用 JQuery Autocompete renderItem 时遇到问题。我的自动完成工作正常,但似乎 .data("ui-autocomplete")._renderItem
在收到数据后没有被调用。当我 运行 脚本时,我没有收到任何错误。我尝试 console.log("success");
但它也没有 运行。我错过了什么吗? jquery-ui 上的版本是 1.12.1。任何帮助将不胜感激!
html:
<td class="itemCodeHd"><input class="itemCode" name="ItemCode[]" <?php echo "value='$ItemCode'"?> <?php echo "id= ItemCodeItem" . $l;?> ></td>
<td class="itemDescriptionSalesHd"><textarea class="itemDescriptionSales" name="ItemDescriptionSales[]" <?php echo "id= ItemDescriptionSalesItem" . $l;?> rows="1" tabindex="2"><?php echo "$ItemDescriptionSales"?></textarea></td>
JSON:
[{"itemCode":"001","itemDescriptionSales":"Item 1"},
{"itemCode":"002","itemDescriptionSales":"Item 2"},
{"itemCode":"003","itemDescriptionSales":"Item 1"}]
Jquery:
$( function() {
$( ".itemCode" ).autocomplete({
source: function( request, response ) {
$.ajax( {
url: "item-search.php",
dataType: "json",
data: {
term: request.term
},
success: function( data ) {
response( data );
}
} );
},
minLength: 3,
select: function( event, ui ) {
$(this).parent().siblings().children(".itemDescriptionSales").val(ui.item.itemDescriptionSales);
}
}).data("ui-autocomplete")._renderItem = function (ul, item) {
console.log("success");
return $('<li>')
.data( "ui-autocomplete-item", item )
.append( "<a>" + item.itemCode + "<br>" + item.itemDescriptionSales + "</a>" )
.appendTo( ul );
};
} );
好的。没有 php 我无法真正测试它,但我认为正在发生的是你放置 console.log()
的代码根本没有触发,因为它在一个单独的函数中。尝试将此代码移动到 ajax 调用的成功函数中。类似于我在下面所做的事情。警告...前方未经测试的代码!
$( function() {
$( ".itemCode" ).autocomplete({
source: function( request, response ) {
$.ajax( {
url: "item-search.php",
dataType: "json",
data: {
term: request.term
},
success: function( data ) {
response( data ).data("ui-autocomplete")._renderItem = function (ul, item) {
console.log("success");
return $('<li>')
.data( "ui-autocomplete-item", item )
.append( "<a>" + item.itemCode + "<br>" + item.itemDescriptionSales + "</a>" )
.appendTo( ul );
};
}
} );
},
minLength: 3,
select: function( event, ui ) {
$(this).parent().siblings().children(".itemDescriptionSales").val(ui.item.itemDescriptionSales);
}
})
});
我在使用 JQuery Autocompete renderItem 时遇到问题。我的自动完成工作正常,但似乎 .data("ui-autocomplete")._renderItem
在收到数据后没有被调用。当我 运行 脚本时,我没有收到任何错误。我尝试 console.log("success");
但它也没有 运行。我错过了什么吗? jquery-ui 上的版本是 1.12.1。任何帮助将不胜感激!
html:
<td class="itemCodeHd"><input class="itemCode" name="ItemCode[]" <?php echo "value='$ItemCode'"?> <?php echo "id= ItemCodeItem" . $l;?> ></td>
<td class="itemDescriptionSalesHd"><textarea class="itemDescriptionSales" name="ItemDescriptionSales[]" <?php echo "id= ItemDescriptionSalesItem" . $l;?> rows="1" tabindex="2"><?php echo "$ItemDescriptionSales"?></textarea></td>
JSON:
[{"itemCode":"001","itemDescriptionSales":"Item 1"},
{"itemCode":"002","itemDescriptionSales":"Item 2"},
{"itemCode":"003","itemDescriptionSales":"Item 1"}]
Jquery:
$( function() {
$( ".itemCode" ).autocomplete({
source: function( request, response ) {
$.ajax( {
url: "item-search.php",
dataType: "json",
data: {
term: request.term
},
success: function( data ) {
response( data );
}
} );
},
minLength: 3,
select: function( event, ui ) {
$(this).parent().siblings().children(".itemDescriptionSales").val(ui.item.itemDescriptionSales);
}
}).data("ui-autocomplete")._renderItem = function (ul, item) {
console.log("success");
return $('<li>')
.data( "ui-autocomplete-item", item )
.append( "<a>" + item.itemCode + "<br>" + item.itemDescriptionSales + "</a>" )
.appendTo( ul );
};
} );
好的。没有 php 我无法真正测试它,但我认为正在发生的是你放置 console.log()
的代码根本没有触发,因为它在一个单独的函数中。尝试将此代码移动到 ajax 调用的成功函数中。类似于我在下面所做的事情。警告...前方未经测试的代码!
$( function() {
$( ".itemCode" ).autocomplete({
source: function( request, response ) {
$.ajax( {
url: "item-search.php",
dataType: "json",
data: {
term: request.term
},
success: function( data ) {
response( data ).data("ui-autocomplete")._renderItem = function (ul, item) {
console.log("success");
return $('<li>')
.data( "ui-autocomplete-item", item )
.append( "<a>" + item.itemCode + "<br>" + item.itemDescriptionSales + "</a>" )
.appendTo( ul );
};
}
} );
},
minLength: 3,
select: function( event, ui ) {
$(this).parent().siblings().children(".itemDescriptionSales").val(ui.item.itemDescriptionSales);
}
})
});