Skip to main content
adicionou 329 caracteres ao conteúdo
Fonte Link
NoobSaibot
  • 9,8mil
  • 6
  • 29
  • 53

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.

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.

correção
Fonte Link
NoobSaibot
  • 9,8mil
  • 6
  • 29
  • 53
$Categorias//Retorna =categorias [
$sqlCategorias = [
mysqli_query($conn, "SELECT id, nome 'id'FROM =>categorias 1,
WHERE nome LIKE '%{$termodeBusca}%' 'tipo'AND =>status '<b>Categoria</b>',
= 1 GROUP BY 'value'nome =>LIMIT 'Carros'10");

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

echo json_encode($Categorias     );
    }
}
$Categorias = [
  [
    'id' => 1,
    'tipo' => '<b>Categoria</b>',
    'value' => 'Carros'
  ],
  [
    'id' => 2,
    'tipo' => '<b>Categoria</b>',
    'value' => 'Motos'
  ]
];

echo json_encode($Categorias);
//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']}"
        );
    }
}
correção
Fonte Link
NoobSaibot
  • 9,8mil
  • 6
  • 29
  • 53
$Categorias = [
  [
    'id' => 1,
    'tipo' => 'Categoria''<b>Categoria</b>',
    'value' => 'Carros'
  ],
  [
    'id' => 2,
    'tipo' => 'Categoria''<b>Categoria</b>',
    'value' => 'Motos'
  ]
];

echo json_encode($Categorias);
$( "#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><b>"+item"<div>"+item.tipo+": </b> " + item.value + "</div>")
    .appendTo( ul );
};
var categorias = [
  {
    id: 1,
    tipo: 'Categoria''<b>Categoria</b>',
    value: 'Imóvel'
  },
  {
    id: 2,
    tipo: 'Categoria''<b>Categoria</b>',
    value: 'Móveis'
  },
  {
    id: 3,
    tipo: 'Categoria''<b>Categoria</b>',
    value: 'Carros'
  },
  {
    id: 4,
    tipo: 'Categoria''<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><b>"+item"<div>"+item.tipo+": </b> " +"+ 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">
$Categorias = [
  [
    'id' => 1,
    'tipo' => 'Categoria',
    'value' => 'Carros'
  ],
  [
    'id' => 2,
    'tipo' => 'Categoria',
    'value' => 'Motos'
  ]
];

echo json_encode($Categorias);
$( "#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><b>"+item.tipo+": </b> " + item.value + "</div>")
    .appendTo( ul );
};
var categorias = [
  {
    id: 1,
    tipo: 'Categoria',
    value: 'Imóvel'
  },
  {
    id: 2,
    tipo: 'Categoria',
    value: 'Móveis'
  },
  {
    id: 3,
    tipo: 'Categoria',
    value: 'Carros'
  },
  {
    id: 4,
    tipo: 'Categoria',
    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><b>"+item.tipo+": </b> " + 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">
$Categorias = [
  [
    'id' => 1,
    'tipo' => '<b>Categoria</b>',
    'value' => 'Carros'
  ],
  [
    'id' => 2,
    'tipo' => '<b>Categoria</b>',
    'value' => 'Motos'
  ]
];

echo json_encode($Categorias);
$( "#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 );
};
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">
Fonte Link
NoobSaibot
  • 9,8mil
  • 6
  • 29
  • 53
Carregando