Autocomplete Textbox-resultaten op basis van SQL-database

De jQuery UI autocomplete kan 3 verschillende soorten waarden aannemen van de bronoptie :

1. Een array met de lijst met dingen om de auto complete mee in te vullen
2. Een tekenreeks met de URL van een script dat een lijst filtert en ons de resultaten stuurt. De plug-in neemt de tekst die erin wordt getypt en verzendt deze als een term parameter in een queryreeks die is toegevoegd aan de door ons verstrekte URL.
3. Een functie die de gegevens ophaalt en vervolgens een callback belt met die gegevens.

Je originele code gebruikt de eerste, een array.

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

Wat de autocomplete vertelt, is dat de string "autocomplete.php" is het enige in de lijst met dingen om automatisch mee aan te vullen.

Ik denk dat je het probeerde te embedden met zoiets als dit:

$(function() {

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

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

});

Dat zou waarschijnlijk goed werken, ervan uitgaande dat de lijst met dingen die uit de database worden geretourneerd altijd kort zal blijven. Het op deze manier doen is echter een beetje fragiel, omdat je gewoon onbewerkte uitvoer van PHP naar je JS schuift. Als de geretourneerde gegevens " . bevatten mogelijk moet u addSlashes gebruiken om er correct aan te ontsnappen. U moet de query echter wijzigen om een ​​enkel veld te retourneren in plaats van * , wilt u waarschijnlijk slechts één veld als label in de autocomplete rij, niet de hele rij.

Een betere benadering, vooral als de lijst potentieel erg groot zou kunnen worden, zou zijn om de tweede methode te gebruiken:

$(function() {

  var availableTags = "autocomplete.php";

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

});

Hiervoor moet u een wijziging aanbrengen in het back-endscript dat de lijst pakt, zodat het filtert. Dit voorbeeld gebruikt een voorbereide instructie om ervoor te zorgen dat de gebruiker gegevens heeft verstrekt in $term stelt je niet open voor SQL-injectie :

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

?>

Het is een tijdje geleden dat ik met mysqli heb gewerkt, dus die code moet misschien wat worden aangepast omdat deze niet is getest.

Het zou goed zijn om er een gewoonte van te maken om voorbereide instructies te gebruiken, want als ze op de juiste manier worden gebruikt, maken ze SQL-injectie onmogelijk. U kunt in plaats daarvan een normale, niet-voorbereide verklaring gebruiken, waarbij u elk door de gebruiker verstrekt item ontwijkt met mysqli_real_escape_string voordat u het in uw SQL-instructie invoegt. Echter , is dit zeer foutgevoelig. Je hoeft maar één ding te vergeten om jezelf open te stellen voor aanvallen. De meeste van de grote "hacks" in de recente geschiedenis zijn te wijten aan slordige codering die kwetsbaarheden voor SQL-injectie introduceert.

Als u zich echt aan de niet-voorbereide verklaring wilt houden, ziet de code er ongeveer zo uit:

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