Risultati della casella di testo di completamento automatico basati sul database SQL

Il completamento automatico dell'interfaccia utente jQuery può accettare 3 diversi tipi di valori dell'opzione sorgente :

1. Un array contenente l'elenco delle cose da compilare in automatico con
2. Una stringa contenente l'URL di uno script che filtra un elenco e ci invia i risultati. Il plugin prenderà il testo digitato al suo interno e lo invierà come term parametro in una stringa di query aggiunta all'URL fornito.
3. Una funzione che recupera i dati e quindi chiama una richiamata con quei dati.

Il tuo codice originale utilizza il primo, un array.

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

Ciò che dice al completamento automatico è che la stringa "autocomplete.php" è l'unica cosa nell'elenco delle cose con cui completare automaticamente.

Penso che quello che stavi cercando di fare sia incorporarlo con qualcosa del genere:

$(function() {

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

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

});

Probabilmente funzionerebbe bene supponendo che l'elenco delle cose che vengono restituite dal database rimarrà sempre breve. Farlo in questo modo è piuttosto fragile, poiché stai semplicemente spingendo l'output non elaborato da PHP nel tuo JS. Se i dati restituiti contengono " potresti dover usare addSlashes per sfuggirgli correttamente. Tuttavia, dovresti modificare la query per restituire un singolo campo anziché * , probabilmente vuoi solo un campo come etichetta nel completamento automatico non l'intera riga.

Un approccio migliore, soprattutto se l'elenco potrebbe potenzialmente diventare molto grande, sarebbe utilizzare il secondo metodo:

$(function() {

  var availableTags = "autocomplete.php";

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

});

Ciò richiederà di apportare una modifica allo script di back-end che sta acquisendo l'elenco in modo che esegua il filtraggio. Questo esempio utilizza un dichiarazione preparata per garantire che l'utente abbia fornito i dati in $term non ti apre a SQL injection :

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

?>

È passato un po' di tempo dall'ultima volta che ho lavorato con mysqli, quindi il codice potrebbe aver bisogno di alcune modifiche poiché non è stato testato.

Sarebbe bene prendere l'abitudine di utilizzare istruzioni preparate poiché, se utilizzate correttamente, rendono impossibile l'iniezione di SQL. Puoi invece utilizzare una normale istruzione non preparata, evadendo ogni elemento fornito dall'utente con mysqli_real_escape_string prima di inserirlo nella tua istruzione SQL. Tuttavia , fare questo è molto soggetto a errori. Basta dimenticare di sfuggire a una cosa per aprirti agli attacchi. La maggior parte dei grandi "hack" nella storia recente sono dovute a un codice sciatto che introduce vulnerabilità di SQL injection.

Se vuoi davvero rimanere con l'istruzione non preparata, il codice sarebbe simile a questo:

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