Usando HTML no preenchimento automático da IU do jQuery


83

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"}]

2
Eu também gostaria que isso fosse respondido, acabei de me deparar com o mesmo problema.
Kieran Andrews

Respostas:


120

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")


O que _renderItem faz? Isso está convertendo o HTML?
Jason

2
forum.jquery.com/topic/using-html-in-autocomplete Veja a segunda postagem, ela descreve tudo.
Kieran Andrews de

7
Em novas versões do jQuery ui, use .data ("ui-autocomplete") e não dados ("autocomplete")
Mike Starov

1
Se você remover o <a>, não poderá clicar / rolar o item.
Piotr Kula

Você é um homem que salva vidas. Quero verificar sua resposta! :)
Sri Harsha Kappala de

10

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 &lt;div&gt;sample&lt;/div&gt;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.

2

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)},

0

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.


Para sua informação: você não precisa dessa solução se usar AJAX como sua fonte, porque você é responsável por filtrar com o "termo" de pesquisa passado de qualquer maneira
Clarence Liu

0

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!


2
@PeterMortensen Eu ri que você o editou para incluir um link da Wikipedia para HTML.
Dan Atkinson
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.