Soort van zoekfunctie

Status
Niet open voor verdere reacties.
Los van dit, is het niet verstandig om je PHP-versie te (laten) updaten?
 
Bovenaan in index.php kan je de gekozen username opvragen. Vergeet niet het <form> aan te passen.
Code: 
<?php
if (isset($_POST['sendform'])) {
  if (isset($_POST['username']) && !empty($_POST['username'])) {
    echo "De username is " . $_POST['username'];
  }
}
?>
<!DOCTYPE html>
<html lang="nl">
...
<form autocomplete="off" [B]action="index.php"[/B] method="post">
  <label for="username">Naam</label>
  <input type="text" id="username" name="username">
  [B]<button[/B] type="submit" name="sendform">Verstuur[B]</button>[/B]
</form>

en vervang de inhoud van autocomplete_query.php door dit
Code: 
$db_host = "localhost";
$db_user = "";
$db_pass = "";
$db_name = "";
$table   = "users"; // tabel
$field   = "name";  // veld in tabel

if (!isset($_POST['sendform'])) {

  $q = (isset($_POST['term'])) ? $_POST['term'] : "";
  $q = trim(strtolower($q));

  $conn = new mysqli($db_host, $db_user, $db_pass, $db_name);
  if ($conn->connect_error) die("Geen connectie: " . $conn->connect_error);
  $sql = "SELECT ".$field." FROM ".$table." WHERE LOWER(".$table.".".$field.") LIKE '".$q."%' LIMIT 10";
  $result = $conn->query($sql);

  $a = []; // tot php5.3 is het $a = array();
  if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
      array_push($a, $row[$field]);
    }
  }
  $conn->close();
  echo json_encode($a);
}
?>
 
Laatst bewerkt:
@Bron
Antwoord #18 gedaan, krijg dus alles met ja te zien.
Antwoord #23.
Bij index.php ook aangepast. Bij klik op verstuur zie ik het wat er is getikt.

alleen wordt ik niet doorgestuurd van index.php naar autocomplete_query.php. Heb de $sql en $a voorzien van echo om resultaat te zien.
Heb tijdelijk Webuilder2020 geïnstalleerd daar zit wel PHP7 in.
Ik probeer het nu online.
 
Heb je ook ervaring met de Network-tab van de browser?
Bij elke toetsaanslag vindt er een request plaats naar een PHP-script. Kan je kijken wat de response daarvan is?

Zie ook; https://developers.google.com/web/tools/chrome-devtools/network

Zeer handig bij het debuggen van AJAX-requests.

Geef anders eens je live URL.
 
@PHP4U

Heb geen ervaring met Network-tab. Ben eigenlijk te oud om me dat nog aan te leren.
Maar kan het wel proberen.
Ben alweer een tijdje bezig daarmee. Wil het gewoon door hebben, haha
op http://sassiesstyle.nl/test1/ heb ik hem nu wel werkend.
Maar mijn db ziet er even anders uit. Veld Voornaam en veld Achternaam.
Dus even kijken naar een oplossing.
 
Laatst bewerkt:
alleen wordt ik niet doorgestuurd van index.php naar autocomplete_query.php
Klik om te vergroten...
Dit klopt, je wordt niet doorgestuurd naar autocomplete_query.php

In <form action="......"> geef je het bestand op waar je (nadat je op Versturen hebt geklikt) wordt toegestuurd. Het bestand autocomplete_query.php is het response bestand dat niets anders doet dan de getypte letters inlezen, controleren in de DB en de resultaten terugsturen naar het formulier. Dit wordt gedaan met ajax.

Meer info over ajax (klik) . Je vindt de ajax code in autocomplete.js tussen regel 70 en 100.

Wil je de code van je html formulier even laten zien?
 
dit is de werkende op http://sassiesstyle.nl/test1/

HTML: 
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AutoComplete</title>
<style>
div.acWrap {
  position: relative;
}
div.acBox {
  position: absolute;
  top: 25px; left: 0;
  padding: 5px;
  z-index: 999;
  background: #fff;
  border: 1px solid grey;
  display: none;
}
div.acBox div:hover {
  cursor: pointer;
  background: #ffa;
}
</style>
<script src="autocomplete.min.js"></script>
<script>
window.addEventListener("load", function(){
  suggest.attach({
    target : 'username',
    url : 'autocomplete_query.php',
    delay : 300,
    min : 2
  });
});
</script>
</head>
<body>
  <form autocomplete="off" action="" method="post">
    <label for="username">Naam</label>
    <input type="text" id="username" name="username">
  </form>
</body>
</html>
 
Autocomplete met ajax

Maar mijn db ziet er even anders uit. Veld Voornaam en veld Achternaam
Klik om te vergroten...
In de bijlage heb ik de html en php aangepast zodat je de autocomplete op meerdere <input> velden kan gebruiken. In het voorbeeld heb ik voornaam en achternaam gebruikt. In het sql test-bestand staat een tabel Personen die je als test in dezelfde database kan zetten. Aan de sql select query heb ik distinct toegevoegd om te voorkomen dat er 10 keer "Doe" in het uitklapvenster komt te staan.
 

Bijlagen

  • autocomplete2.zip
    5,2 KB · Weergaven: 19
@Bron
Ik neem mijn petje af voor je voor de ondersteuning.
Maak er graag gebruik van. Alles wat nieuw is, sla ik op in een bestand zodat ik er op terug kan vallen.
Al met al ben ik te vroeg geboren.
Ik ga dit bestand even proberen.
Thanx.
 
autocomplete(.min).js is een universeel script (niet van mij). Het gaat erom hoe dat script moet worden toegepast :) en daarvoor is wat algemene js en php kennis voor nodig. Een autocomplete in een formulier is voor mij ook de eerste keer, wel leuk om te maken.

Oops. klein foutje, wil je de $name regel toevoegen
Code: 
<?php
[B]$name = '';[/B]
if (isset($_POST['sendform'])) {
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan