Autocompletar resultados de cuadro de texto basados ​​en base de datos SQL

El autocompletado de jQuery UI puede tomar 3 tipos diferentes de valores de la opción de fuente :

1. Una matriz que contiene la lista de cosas para completar el autocompletar con
2. Una cadena que contiene la URL de un script que filtra una lista y nos envía los resultados. El complemento tomará el texto escrito en él y lo enviará como un term parámetro en una cadena de consulta adjunta a la URL que proporcionamos.
3. Una función que recupera los datos y luego llama a una devolución de llamada con esos datos.

Su código original usa el primero, una matriz.

var availableTags = [
  "autocomplete.php";
];

Lo que le dice al autocompletar es que la cadena "autocomplete.php" es lo único en la lista de elementos para autocompletar.

Creo que lo que intentabas hacer era incrustarlo con algo como esto:

$(function() {

  var availableTags = [
    <?php include("autocomplete.php"); /* include the output of autocomplete as array data */ ?>;
  ];

  $( "#tags" ).autocomplete({
    source: availableTags
  });

});

Eso probablemente funcionaría bien, suponiendo que la lista de cosas que se devuelven de la base de datos siempre será corta. Sin embargo, hacerlo de esta manera es un poco frágil, ya que solo está empujando la salida sin procesar de PHP a su JS. Si los datos devueltos contienen " es posible que deba usar addSlashes para escapar correctamente. Sin embargo, debe cambiar la consulta para devolver un solo campo en lugar de * , probablemente solo desee un campo como etiqueta en el autocompletado, no toda la fila.

Un mejor enfoque, especialmente si la lista podría crecer mucho, sería usar el segundo método:

$(function() {

  var availableTags = "autocomplete.php";

  $( "#tags" ).autocomplete({
    source: availableTags
  });

});

Esto requerirá que realice un cambio en la secuencia de comandos de back-end que está tomando la lista para que realice el filtrado. Este ejemplo usa una declaración preparada para asegurarse de que el usuario proporcionó datos en $term no te abre a inyección SQL :

<?php

include('conn.php');

// when it calls autocomplete.php, jQuery will add a term parameter
// for us to use in filtering the data we return. The % is appended
// because we will be using the LIKE operator.
$term = $_GET['term'] . '%';
$output = array();

// the ? will be replaced with the value that was passed via the
// term parameter in the query string
$sql="SELECT name FROM oldemp WHERE name LIKE ?";

$stmt = mysqli_stmt_init($mysqli);

if (mysqli_stmt_prepare($stmt, $sql)) {

  // bind the value of $term to ? in the query as a string
  mysqli_stmt_bind_param($stmt, 's', $term);

  mysqli_stmt_execute($stmt);

  // binds $somefield to the single field returned by the query
  mysqli_stmt_bind_result($stmt, $somefield);

  // loop through the results and build an array.
  while (mysqli_stmt_fetch($stmt)) {
      // because it is bound to the result
      // $somefield will change on every loop
      // and have the content of that field from
      // the current row.
      $output[] = $somefield;
  }

  mysqli_stmt_close($stmt);
}

mysqli_close($mysqli);

// output our results as JSON as jQuery expects
echo json_encode($output);

?>

Ha pasado un tiempo desde que trabajé con mysqli, por lo que es posible que ese código necesite algunos ajustes ya que no se ha probado.

Sería bueno adquirir el hábito de usar declaraciones preparadas ya que cuando se usan correctamente, hacen que la inyección SQL sea imposible. En su lugar, puede usar una declaración normal no preparada, escapando de cada elemento proporcionado por el usuario con mysqli_real_escape_cadena antes de insertarlo en su declaración SQL. Sin embargo , hacer esto es muy propenso a errores. Solo se necesita olvidar escapar de una cosa para abrirse a los ataques. La mayoría de los principales "trucos" en la historia reciente se deben a una codificación descuidada que introduce vulnerabilidades de inyección SQL.

Si realmente quiere seguir con la declaración no preparada, el código se vería así:

<?php
  include('conn.php');

  $term = $_GET['term'];
  $term = mysqli_real_escape_string($mysqli, $term);
  $output = array();

  $sql = "SELECT name FROM oldemp WHERE name LIKE '" . $term . "%';";

  $result = mysqli_query($mysqli,$sql) or die(mysqli_error());

  while($row=mysqli_fetch_array($result))
  {
    $output[] = $row['name'];
  }

  mysqli_close($mysqli);

  // output our results as JSON as jQuery expects
  echo json_encode($output);
?>