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

【问题标题】：jquery autocomplete - selected value disappears from textboxjquery自动完成 - 选定的值从文本框中消失
【发布时间】：2014-11-17 23:43:20
【问题描述】：

我已经编写了一个自定义 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 文本字段之外的所有内容都会被填充。该字段将变为空白。

谁能告诉我这是什么原因造成的？

谢谢山姆

【问题讨论】：

标签： javascript jquery jquery-ui jquery-autocomplete jquery-ui-autocomplete

【解决方案1】：

由于您在select 处理程序中提供自己的逻辑，因此您需要阻止默认操作，即将ui.item.value 放在input 中。

现在，您的代码正在运行，然后 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(); // <---
}

【讨论】：

非常感谢。确实有效。我认为通过覆盖，它会处理默认值:)

【解决方案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);
        }
    });

【讨论】：