jQuery autocomplete _renderItem将项设置为null

Question

我在重新定义_renderItems时遇到问题。问题是它将项目设置为null，换句话说我收到错误

  

无法读取null

的属性'casValue'

代码：

$(function() {
        $('.CasNumber').autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: //url of the page
                    dataType: "json",
                    data: {
                        search_word: request.term,
                    },
                    success: function(data) {
                        response($.map(data.result, function(item) {
                            return {
                                label: item.Cas,
                                value: item.Cas,
                                casLabel: 'Cas No.',
                                casValue: item.Cas,
                                egLabel: 'Eg No.',
                                egValue: item.Eg,
                                REACHLabel: 'REACH No.',
                                REACHValue: item.ReachRegNumber,
                                indexLabel: 'Index-number',
                                indexValue: item.IndexNumber,
                                nameValue: item.Name,
                                data: item
                            }
                        }));
                    }
                });
            },
            minLength: 1,

            focus: function(event, ui) {


                $(".CasNumber").val(ui.item.casValue);
                return false;
            },

            select: function(event, ui) {
                log(ui.item.data, this);
                return false;
            },
            open: function() {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function() {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            }
        })
        .data("ui-autocomplete")._renderItem = function(ul, item) {
            return $("<li>")
            .data("item.ui-autocomplete", item)
            .append("//Format of the drop down list is here")
            .appendTo(ul);
        };
    });

当我使用调试器查看代码时，它在_renderItem中正确获取了一个项值，它完美地绘制了列表，但是一旦焦点开始（在项目选择之后）ui.item parameter被设置为null。

Answer 1

正确的项目渲染：

    _renderItem = function( ul, item ) {
          return $("<li>")
        .attr("data-value", item.value)
        .append("<a></a>")
        .append(item.value)
        .appendTo(ul);
    };

请注意标记＆lt; a＆gt;

Answer 2

结构中的第一个元素需要锚定，以使其正常工作。