Question

我在WordPress自定义帖子中使用jQuery Autocomplete。填写自动完成输入字段时，ajax似乎正常工作，并返回匹配的数据。一旦我在下拉列表中选择了一个项目，输入字段就会自行清除。我一步一步地浏览了JavaScript，并且输入字段#title由populateForm（）函数正确设置，但在我的脚本完成后的某个时刻，该字段被清空。

是否有人知道可能导致这种情况的原因，或者我可以解决它的体面方式？

我在下面包含了我的js。如果有任何其他信息可能有所帮助，请告诉我。

(function ($) {
var url = ajax_object.ajaxurl;
var popped = []

$('#title')
        .autocomplete({
            source: function( request, response ) {
            $.getJSON( url, {
                term : extractLast( request.term ),
                action : 'autocomplete'
            }, response);
        },
        search: function() {
            var term = extractLast( this.value );
            if ( term.length < 2 ) {
                return false;
            }
        },
        select: function( event, ui ) {
            populateForm(ui.item);
        },
        response: function( event, ui ) { 
            for (var i in ui.content) {
                popped.push(ui.content[i]);
            }
        }
    }).data("ui-autocomplete")._renderItem = function(ul, item) {
            return $("<li></li>")
                .data("ui-autocomplete-item", item)
                .append("<a><strong>" + item.name + "</strong> (" + item.username.replace(/[^a-zA-Z]+/g, '') + ")</a>")
                .appendTo(ul);
    };

function populateForm(obj) {
    $('input#title').val(obj['username']);
    for (var property in obj) {
        if (obj.hasOwnProperty(property)) {
            $('input#form-' + property).val(obj[property]);
        }
    }
}

function split( val ) {
    return val.split( /,\s*/ );
}

function extractLast( term ) {
    return split( term ).pop();
}
})(jQuery);

Answer 1

Per the Autocomplete docs，select事件的ui.item只有2个属性：label和value。您将其传递给populateForm()，然后尝试将文字输入的值更改为ui.item.username。如果您打开浏览器的开发控制台，则会看到错误。

jQuery自动完成输入清除自身

1 个答案: