jquery autocomplete - 选定的值从文本框中消失

Question

我编写了一个自定义jquery自动完成功能来显示某些值和文本字段,以便根据以下代码选择值进行更新:

<input type="text" name="promoitem" id="promoitem">

$('#promoitem').autocomplete({
        source: "BckProcesses/GetPromoItems.asp",
        create: function() {
            $(this).data('ui-autocomplete')._renderItem = function(ul, item) {
                return $('<li>')
                .append('<a>' + item.promodesc + '</a>')
                .appendTo(ul);
            }
        },
        select: function(event, ui) {
            $('#promoitem').val(ui.item.promodesc); 
            $('#promocost').val(ui.item.promocost);
            $('#promoqty').val(ui.item.qty);
            $('#hidden_promo_item_id').val(ui.item.id);
        }
    });

这是源文件返回的内容(GetPromoItems.asp)

[{"id": "1", "promodesc": "Ipad 4 ", "promocost": "200", "qty": "1"},{"id": "2", "promodesc": "Village Tickets", "promocost": "20", "qty": "2"}]

但是,当我从ul中选择值时,除promoitem文本字段外,所有内容都会被填充.那些领域变成了空白.

任何人都可以让我知道是什么原因造成的？

谢谢山姆

Answer 1

既然你在提供自己的逻辑select处理器,你需要防止默认操作,它是放置ui.item.value在input.

现在,您的代码运行,然后jQueryUI的立即尝试放置ui.item.value在input,这也解释了空值.

所以你需要做的就是调用event.preventDefault();或return false;从select处理程序:

select: function(event, ui) {
    $('#promoitem').val(ui.item.promodesc); 
    $('#promocost').val(ui.item.promocost);
    $('#promoqty').val(ui.item.qty);
    $('#hidden_promo_item_id').val(ui.item.id);

    event.preventDefault(); // <---
}