javascript - jquery 自动完成 - 选定的值从文本框中消失

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 放在 输入。

现在，您的代码正在运行，然后 jQueryUI 立即尝试将 ui.item.value 放入 input，这解释了空值。

因此，实际上您需要做的就是从 select 处理程序调用 event.preventDefault(); 或 return false;:

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(); // <---
}