0

Estou usando o autocomplete do jQuery. Consegui fazer ele interpretar o HTML, mas o HTML é exibido no input.

Preciso formatar minha busca assim, como fiz: inserir a descrição da imagem aqui

Quando eu clico, no entanto, o resultado é exibido assim: inserir a descrição da imagem aqui

Não deveria apresentar as tags. Como faço?

Esse é meu código:

$("form#busca #campo-busca").autocomplete({
  minLength: 3,
  source: 'autocomplete.php',
  html: true
});
<form id="busca">
  <input type="text" placeholder="O que você está procurando?" name="busca" id="campo-busca">
  <input type="submit" value="buscar">
  <br>
</form>

E aqui o PHP:

$termodeBusca = $_GET['term'];

//Retorna categorias 
$sqlCategorias = mysqli_query($conn, "SELECT nome FROM categorias WHERE nome LIKE '%{$termodeBusca}%' AND status = 1 GROUP BY nome LIMIT 10");

if(mysqli_num_rows($sqlCategorias) != 0){
    while($nomeCategoria = mysqli_fetch_array($sqlCategorias)){
        $resultado[] = "<b>Categoria</b> {$nomeCategoria['nome']}";
    }
}

//Retorna categorias 
$sqlClientes = mysqli_query($conn, "SELECT nome FROM clientes WHERE nome LIKE '%{$termodeBusca}%' AND status = 1 GROUP BY nome LIMIT 100");

if(mysqli_num_rows($sqlClientes) != 0){
    while($nomeCliente = mysqli_fetch_array($sqlClientes)){
        $resultado[] = "<i>{$nomeCliente['nome']}</i>";
    }
}

//Devolve ao Ajax
echo json_encode($resultado);
4
  • Aryana Valcanaia, verificar se você retirar as tags: De $resultado[] = "<b>Categoria</b> {$nomeCategoria['nome']}"; Para $resultado[] = "Categoria - {$nomeCategoria['nome']}";. Commented 26/11/2017 às 0:36
  • @pss1suporte Oi! Sim, se eu tirar as tags dali, no input não é apresentado. O problema é que eu preciso manter a formatação da primeira imagem :/ Commented 26/11/2017 às 0:47
  • @AryanaValcanaia já tentou utilizar o método _renderItem ?
    – NoobSaibot
    Commented 26/11/2017 às 1:08
  • oi @wmsouza! Tentei sim, não sei se não implementei certo ou não consegui implementar, mas não funcionou :/ acredito que com ele preciso retornar um array dentro do meu $resultado[] passando um valor a ser exibido pelo input e outro pelos resultados de busca. Tentei de tudo quanto é jeito e não rolou. Também não encontro exemplo como o que eu preciso :( Commented 26/11/2017 às 1:22

2 Respostas 2

0

Lendo a documentação do Autocomplete, não localizei nada falando sobre a opção html: true/false, mas fala sobre a extensão jquery.ui.autocomplete.html.js criada por Scott González.

Você deve retornar os dados em JSON e utilizar o método _renderItem, veja abaixo um exemplo:

Arquivo autocomplete.php

//Retorna categorias 
$sqlCategorias = mysqli_query($conn, "SELECT id, nome FROM categorias WHERE nome LIKE '%{$termodeBusca}%' AND status = 1 GROUP BY nome LIMIT 10");

if(mysqli_num_rows($sqlCategorias) != 0){
    while($Categorias = mysqli_fetch_array($sqlCategorias)){
        $resultado[] = array(
            "id" => $Categorias['id'],
            "value" => "<b>Categoria</b> {$Categorias['nome']}"
        );
    }
}

JavaScript

$( "#campo-busca" ).autocomplete({
  minLength: 0,
  source: 'autocomplete.php',
  focus: function( event, ui ) {
    $( "#campo-busca" ).val( ui.item.value );
    return false;
  },
  select: function( event, ui ) {
    $( "#campo-busca" ).val(ui.item.value);
    return false;
  }
})
  .autocomplete( "instance" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .data("item.autocomplete", item)
    .append( "<div>"+item.tipo+": " + item.value + "</div>")
    .appendTo( ul );
};

Veja funcionando:

var categorias = [
  {
    id: 1,
    tipo: '<b>Categoria</b>',
    value: 'Imóvel'
  },
  {
    id: 2,
    tipo: '<b>Categoria</b>',
    value: 'Móveis'
  },
  {
    id: 3,
    tipo: '<b>Categoria</b>',
    value: 'Carros'
  },
  {
    id: 4,
    tipo: '<b>Categoria</b>',
    value: 'Motos'
  }
];

$( "#campo-busca" ).autocomplete({
  minLength: 0,
  source: categorias,
  focus: function( event, ui ) {
    $( "#campo-busca" ).val( ui.item.value );
    return false;
  },
  select: function( event, ui ) {
    $( "#campo-busca" ).val(ui.item.value);
    return false;
  }
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .data("item.autocomplete", item)
    .append( "<div>"+item.tipo+": "+ item.value + "</div>")
    .appendTo( ul );
};
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="campo-busca">

1
  • 1
    Era isso mesmo! Funcionou certinho, muito obrigada. Tive alguns problemas de implementação. Seu exemplo foi muito próximo do que vinha tentando implementar com renderItem. Inclusive estava com dificuldades de implementar seu código rodando junto com meu projeto (isolado funcionava). Eis que o problema era: conflito de ID. Descobri que no projeto haviam dois IDs com o mesmo nome. Fica a dica pra outras pessoas que ficarem se batendo hahaha perdi horas numa bobeira. Muito obrigada de novo! :) Commented 26/11/2017 às 13:23
0

Bom, uma das abordagens pode ser a seguinte:

$("form#busca #campo-busca").autocomplete({
  minLength: 3,
  source: 'autocomplete.php',
  /** 
   * Sugestão de uma das possíveis soluções.
   */
  select: function( event, ui ) {
    /**
     * Considerando que podemos acessar o valor assim: ui.item.value
     */
    $("form#busca #campo-busca").val( ui.item.value );
    // ou
    $("form#busca #campo-busca").html( ui.item.value );

    return false;
  },
  html: true
});

NOTA: interessante analizar a possibilidade de usar os recursos de forma a reutilização. Desta forma pense em criar o componente dentro de um plugin [Jonathan Chaffer, Karl Swedberg - 2013, ___ 8 - Developing Plugins, 234 p.] e usando como um $.widget(){}.

o arquivo do plugin: app-seu-plugin.js

/*@!
 * @auth: Paulo Sérgio da Silva
 * @email: [email protected]
 * @plugin: app-seu-plugin.js 
 * @description: O objetivo de centralizar as funções genéricas para o
 *  carregamento e apresentação do autocompletar em ????????.
 *
 * Autocompletar Categoria v1.0.0 (http://www.??????/)
 * Copyright 2011-2015 ????, Pub.
 * Licensed under MIT ()
 */

if (typeof jQuery === 'undefined') { 
    throw new Error('Component Type Fields\'s JavaScript requires jQuery') 
}

/**
 * Criando o plugin
 */
(function($){ 

    var SeuPlugin = function(){
        this.alertTestPlugin = function(){
          console.log("alertTestPlugin: Testando o plugin jQuery!");
          alert("alertTestPlugin: Testando o plugin jQuery!");
          return false;
        };

        this.createWidget = function() {
             /** Criando do widget */
             $.widget( "custom.seuComponenteAutocompletar", $.ui.autocomplete, {
              _create: function() {
                //Implementar o comportamento de seu interesse
              },
              _renderMenu: function( ul, items ) {
                //Implementar a aparência de seu meu
              }
            });
        }
    };

    $.SeuPlugin = new SeuPlugin();
    $.SeuPlugin.prototype = SeuPlugin;

})(jQuery); 

/**
 * 
 */
$.SeuPlugin.createWidget();

Carregar o seu plugin:

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Carregar o seu plugin -->
<script src="../plugins/PATH_PARA_SEU_PLUGIN/app-seu-plugin.js"></script>

Usando seu componente:

$("form#busca #campo-busca").seuComponenteAutocompletar({
  delay: 0,
  minLength: 3,
  source: 'autocomplete.php',
  html: true
});

Referência:
[Jonathan Chaffer, Karl Swedberg - 2013], Copyright © 2013 Packt Publishing, Learning jQuery Fourth Edition: Better interaction, design, and web development with simple JavaScript techniques. Disponível em: < https://www.packtpub.com/web-development/learning-jquery-fourth-edition >. Acesso em: 25 Nov, 2017.
[jqueryui], Autocomplete #categories: jQuery User interface - Autocomplete. Disponível em: < https://jqueryui.com/autocomplete/#categories >. Acesso em: 25 Nov, 2017.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .