1

Colegas.

Estou usando o template AdminLTE para um projeto, porém em uma das páginas quero colocar uma API de autocomplete para as buscas. O problema é que quando coloco essa API que tem uma referência do jquery dentro de sua pasta, o menu para de funcionar e quando tiro a API ou sua referência ao Jquery, o menu volta a funcionar, porém a API não funciona mais. Já troquei as posições e o conflito permanece. Enfim, alguém saberia como faço para resolver esse impasse entre esses códigos. Veja abaixo:

AdminLTE

<!-- jQuery 2.2.3 -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>

AutoComplete

  <script type="text/javascript" src="jquery-autocomplete/lib/jquery.bgiframe.min.js"></script>
 <script type="text/javascript" src="jquery-autocomplete/lib/jquery.ajaxQueue.js"></script>
 <script type="text/javascript" src="jquery-autocomplete/lib/thickbox-compressed.js"></script>
 <script type="text/javascript" src="jquery-autocomplete/jquery.autocomplete.js"></script>
 <script type="text/javascript">
   $(document).ready(function(){
   $("#txtNome").autocomplete("buscar-escola.php", {
     width:310,
     selectFirst: false
   });
 });
 </script>

2 Respostas 2

1

Acredito que este problema esteja sendo causado na verdade por um conflito relacionado ao método autocomplete, veja bem:

  • Você está adicionando o jquery-autocomplete/jquery.autocomplete.js, que possui o método autocomplete() que você pretende utilizar.
  • Antes, você adiciona o https://code.jquery.com/ui/1.11.4/jquery-ui.min.js, que adivinhe só, possui o método autocomplete().

Minha sugestão é que utilize a própria ferramenta de autocomplete do jQuery UI, pois provavelmente você o adicionou por que utiliza outros recursos do mesmo. Neste caso você poderia seguir o seguinte exemplo que a própria documentação oferece:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Remote JSONP datasource</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .ui-autocomplete-loading {
    background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

    $( "#birds" ).autocomplete({
      source: function( request, response ) {
        $.ajax( {
          url: "search.php",
          dataType: "jsonp",
          data: {
            term: request.term
          },
          success: function( data ) {
            response( data );
          }
        } );
      },
      minLength: 2,
      select: function( event, ui ) {
        log( "Selected: " + ui.item.value + " aka " + ui.item.id );
      }
    } );
  } );
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="birds">Birds: </label>
  <input id="birds">
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>


</body>
</html>
1
  • 1
    Obrigado Kenny Rafael.
    – user24136
    Commented 21/01/2017 às 12:03
0

Aproveitando a solução do Kenny Rafael, na linha:

dataType: "jsonp",

Troquei para:

dataType: "json",

e o search.php pode ficar dessa forma:

<?php
include("sua-conexao.php"); // $con = conexao

$valor = $_GET["term"];
$trazer = array();

$sql = mysqli_query($con,"SELECT * FROM suatabela WHERE campotabela like '%" . $valor . "%'");

while($mostrar = mysqli_fetch_array($sql)){
        $trazer[] = $mostrar["campotabela"];    
}
echo json_encode($trazer);
 ?>

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