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

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

2 个答案: