How not to display in the input with autocomplete jQuery UI the HTML of the variable?

Question

How not to display in the input with autocomplete jQuery UI the HTML of the variable?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm using the jQuery autocomplete . I was able to make it interpret HTML , but HTML is displayed in input .

I need to format my search like this, like I did:

WhenIclick,however,theresultisdisplayedlikethis:

Youshouldnotdisplaythetags.HowdoI?

Here'smycode:

$("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>

And here's 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);

jquery autocompletar jquery-ui front-end

asked by anonymous 26.11.2017 / 01:32

2 answers

0

Well, one approach might be as follows:

$("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
});

NOTE : interesting to analyze the possibility of using resources in a way to reuse. So think about creating the component inside a plugin [ Jonathan Chaffer, Karl Swedberg - 2013 ,

26.11.2017 / 02:41

Collecting Facebook data with a Share Share Problem checking user already exists before registering

score 0 · Accepted Answer

Reading the Autocomplete documentation, I did not find anything talking about the html: true / false option, but talk about the extension jquery.ui.autocomplete.html.js created by Scott Gonzalez .

You should return the data in JSON and use the _renderItem method, see below an example:

Autocomplete.php file

//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 );
};

See working:

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><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="campo-busca">