I've been using the following code to render the autocomplete results:

$('#' id_input).data("ui-autocomplete")._renderItem = function(ul, item){
            let conteudo="";

            conteudo  = "<div class='autocomplete__comparador' >" 
                            "<div style='display:inline-block;vertical-align:top;'>"  
                                "<div class='autocomplete_nome_fundo'><span style='font-size:14px;'>"   item.ticker   '</span>&nbsp;&nbsp;&nbsp;'   item.nome   "</div>" 
                            "</div>" 
                        "</div>";

            return $("<li class=''></li>")
            .data("item.autocomplete", item)
            .append(conteudo)
            .appendTo(ul)
        };

However, I'm getting the following code error:

jquery-3.6.0.js:4050 jQuery.Deferred exception: Cannot set properties of undefined (setting '_renderItem') TypeError: Cannot set properties of undefined (setting '_renderItem')

Does anyone know how to solve this? I'm using jquery-3.6.0 and jquery-ui 1.13.2

CodePudding user response：

Try this:

$('#' id_input).data("ui-autocomplete")._renderItem = function(ul, item){
        let conteudo="";

        conteudo  = "<div class='autocomplete__comparador' >" 
                        "<div style='display:inline-block;vertical-align:top;'>"  
                            "<div class='autocomplete_nome_fundo'><span style='font-size:14px;'>"   item.ticker   '</span>&nbsp;&nbsp;&nbsp;'   item.nome   "</div>" 
                        "</div>" 
                    "</div>";
        item.label = conteudo;
        return $("<li class=''></li>")
        .data("item.autocomplete", item)
        .append(item.label)
        .appendTo(ul);
    };

CodePudding user response：

Turned out that I was passing the wrong ID LOL, however, as specified by Twisty, this is not the best way to assign the render_item function. The best way is the following:

autocomplete( "instance" )._renderItem = function( ul, item ) {
            let conteudo="";

            conteudo  = "<a><span class=\"left\">"   item.ticker   "</span> <span class=\"right\">"   item.nome   "</span></a>";
            return $("<li class=''></li>")
              .append(conteudo)
              .appendTo(ul);
          };