Usando HTML no preenchimento automático da IU do jQuery

Antes do jQuery UI 1.8.4, eu podia usar HTML no array JSON que construí para trabalhar com preenchimento automático.

Consegui fazer algo como:

$row_array['label'] = '<span style="color: red; font-family: courier;">User, Name</span>';

Isso seria exibido como um texto em vermelho no menu suspenso.

A partir de 1.8.4 isso não funciona. Encontrei http://dev.jqueryui.com/ticket/5275 que me diz para usar o exemplo de HTML personalizado aqui, com o qual não tive sorte.

Como posso fazer com que o HTML apareça na sugestão?

Minha jQuery é:

<script type="text/javascript">
    $(function() {
        $("#findUserIdDisplay").autocomplete({
            source: "ui_autocomplete_users_withuname.php",
            minLength: 2,
            select: function(event, ui) {
                $('#findUserId').val(ui.item.id);
            }
        });
    });
</script>

Minha matriz JSON inclui HTML como o seguinte:

[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]

Adicione isto ao seu código:

).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>"+ item.label + "</a>" ) 
                .appendTo( ul );
        };

Portanto, seu código se torna:

<script type="text/javascript">
 $(function () {
     $("#findUserIdDisplay").autocomplete({
         source: "ui_autocomplete_users_withuname.php",
         minLength: 2,
         select: function (event, ui) {
             $('#findUserId').val(ui.item.id);
             return false;
         }
     }).data("ui-autocomplete")._renderItem = function (ul, item) {
         return $("<li></li>")
             .data("item.autocomplete", item)
             .append("<a>" + item.label + "</a>")
             .appendTo(ul);
     };
 });
</script>

Nota: Em versões antigas do jQueryUI, use em .data("autocomplete")"vez de.data("ui-autocomplete")

Isso também está documentado na documentação do autocomplete do jquery-ui em: http://api.jqueryui.com/autocomplete/#option-source

O truque é:

1. Use esta extensão jQuery UI
2. Depois, na opção de preenchimento automático, passe autocomplete({ html:true});
3. Agora você pode passar html <div>sample</div>no campo "rótulo" da saída JSON para o preenchimento automático.

Se você não sabe como adicionar o plug-in à IU do JQuery:

1. Salve o plugin (extensão html de Scott González) em um arquivo js ou baixe o arquivo js.
2. Você já adicionou o script de preenchimento automático jquery-ui em sua página html (ou o arquivo jquery-ui js). Adicione este script de plug-in após o arquivo javascript de preenchimento automático.

Esta solução não é recomendada, mas você pode apenas editar o arquivo de origem jquery.ui.autocomplete.js (v1.10.4)

Original:

_renderItem:function(t,i){return e("<li>").append(e("<a>").text(i.label)).appendTo(t)},

Fixo:

_renderItem:function(t,i){return e("<li>").append(e("<a>").html(i.label)).appendTo(t)},

Eu tive o mesmo problema, mas prefiro usar uma matriz estática de opções para minha opção ('fonte') para desempenho. Se você tentou isso com esta solução, você descobrirá que o jQuery pesquisa em todo o rótulo também.

EG se você forneceu:

[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]

Então, digitar "span" corresponderia a ambos os resultados, para fazer com que a pesquisa no valor apenas substituísse a $.ui.autocomplete.filterfunção:

$.ui.autocomplete.filter = function(a,b){var g=new RegExp($.ui.autocomplete.escapeRegex(b),"i");return $.grep(a,function(c){return g.test(c.value||c)})}

Você pode editar o último parâmetro c.valuepara qualquer coisa que desejar, por exemplo c.id || c.label || c.value, permitiria que você pesquise no rótulo, valor ou id.

Você pode fornecer quantas chaves / valores desejar para o parâmetro de origem do preenchimento automático.

PS: o parâmetro original é c.label||c.value||c.

Eu tive o problema mencionado por Clarence. Eu precisava fornecer HTML para fazer uma boa aparência com estilos e imagens. Isso resultou na digitação de "div" correspondendo a todos os elementos.

No entanto, meu valor era apenas um número de identificação, então eu não podia permitir que a pesquisa partisse apenas disso. Eu precisava pesquisar vários valores, não apenas o número de identificação.

Minha solução foi adicionar um novo campo que continha apenas os valores de pesquisa e verificar isso no arquivo jQuery UI. Isso é o que eu fiz:

(Isso está no jQuery UI 1.9.2; pode ser o mesmo em outras.)

Editar função de filtro na linha 6008:

filter: function (array, term) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i");
        return $.grep(array, function (value) {
            if (value.searchonly == null)
                return matcher.test(value.label || value.value || value);
            else
                return matcher.test(value.searchonly);
        });
    }

Eu adicionei a verificação do campo "value.searchonly". Se estiver lá, ele usará apenas esse campo. Se não estiver lá, ele funciona normalmente.

Em seguida, você usa o preenchimento automático exatamente como antes, exceto que pode adicionar a chave "searchonly" ao seu objeto JSON.

Espero que ajude alguém!