Résultats de la saisie semi-automatique basés sur la base de données SQL

La saisie semi-automatique de jQuery UI peut prendre 3 types de valeurs différents de l'option source :

1. Un tableau contenant la liste des éléments à remplir dans la saisie semi-automatique
2. Une chaîne contenant l'URL d'un script qui filtre une liste et nous envoie les résultats. Le plugin prendra le texte saisi et l'enverra en tant que term paramètre dans une chaîne de requête ajoutée à l'URL que nous avons fournie.
3. Une fonction qui récupère les données, puis appelle un rappel avec ces données.

Votre code d'origine utilise le premier, un tableau.

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

Ce que cela indique à la saisie semi-automatique, c'est que la chaîne "autocomplete.php" est la seule chose dans la liste des choses avec lesquelles la saisie semi-automatique.

Je pense que ce que vous essayiez de faire, c'est de l'intégrer avec quelque chose comme ceci :

$(function() {

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

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

});

Cela fonctionnerait probablement bien en supposant que la liste des éléments renvoyés par la base de données restera toujours courte. Le faire de cette façon est un peu fragile, car vous ne faites que pousser la sortie brute de PHP dans votre JS. Si les données renvoyées contiennent " vous devrez peut-être utiliser addSlashes pour y échapper correctement. Vous devez cependant modifier la requête pour renvoyer un seul champ plutôt que * , vous ne voulez probablement qu'un seul champ comme étiquette dans la saisie semi-automatique et non la ligne entière.

Une meilleure approche, surtout si la liste peut devenir très longue, serait d'utiliser la seconde méthode :

$(function() {

  var availableTags = "autocomplete.php";

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

});

Cela vous obligera à modifier le script principal qui récupère la liste afin qu'il effectue le filtrage. Cet exemple utilise une instruction préparée pour s'assurer que l'utilisateur a fourni des données dans $term ne vous ouvre pas à l'injection 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);

?>

Cela fait un moment que je n'ai pas travaillé avec mysqli, donc ce code pourrait nécessiter quelques ajustements car il n'a pas été testé.

Il serait bon de prendre l'habitude d'utiliser des instructions préparées car bien utilisées, elles rendent l'injection SQL impossible. Vous pouvez à la place utiliser une instruction normale non préparée, échappant à chaque élément fourni par l'utilisateur avec mysqli_real_escape_string avant de l'insérer dans votre instruction SQL. Cependant , cela est très sujet aux erreurs. Il suffit d'oublier d'échapper à une chose pour s'exposer aux attaques. La plupart des "hacks" majeurs dans l'histoire récente sont dues à un codage bâclé introduisant des vulnérabilités d'injection SQL.

Si vous voulez vraiment vous en tenir à l'instruction non préparée, le code ressemblera à ceci :

<?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);
?>