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

Answer 2

花了一个小时后，终于明白Jquery UI自动完成将值设置为默认值。

只有一行需要放置并阻止Jquery默认函数来完成工作。

//密码列表自动完成

$('input[name=\'pincode\']').autocomplete({
        'source': function (request, response) {
            $.ajax({
                url: 'index.php?route=seller/pincode/pincodeAutocomplete&filter_name=' + encodeURIComponent($('input[name=\'pincode\']').val()),
                dataType: 'json',
                success: function (json) {
                    json.unshift({
                        pincode_id: '',
                        pincode: '-- None --'
                    });
                    response($.map(json, function (item) {
                        return {
                            label: item['pincode'],
                            value: item['pincode_id']
                        }
                    }));
                }
            });
        },
        'select': function (event, ui) {
            event.preventDefault();
            $('input[name=\'pincode\']').val(ui.item.label);
            $('input[name=\'pincode_id\']').val(ui.item.value);
        }
    });