Suggested search using PHP/JSON/AJAX help

[CodeRed-Alpha]

I have a search bar for personnel for my company website.  I want the search bar to to provide suggested names (based on available names list from a data table)  This should provide suggestions based on the user input into the search field.  I will have a human-wait-state as a listener to see what potential suggestions are available after the user stops typing for a second or however long.

 

There is form data coming in from the search bar on a page called 'Personnel.php'  I don't know if you need to see the form code as it is standard html.  I know I am missing a part or 2 in the php search side to allow for the suggestions to come down.  I would imagine it would be easier to just look up the user by 'full_name' which is a field in the table instead of cross referencing the ID.

 

This search feature should be string/text based and now using an JQuery.  Obviously we can omplish this using AJAX/JQuery but we are trying to accomplish this a different way.

let Store_Stuff=null;
function find_people(){
    let dataset=new FormData(p_search_form);
  dataset.append('ACTION', '123');
  let request=new XMLHttpRequest();
  request.onreadystatechange=function(){
      if(request.readyState===4 && request.status===200){
          if(request.responseText!==''){
              ///Do more stuff
              try{
                  let content=JSON.parse(request.responseText);
          if(content.status==='OK'){
              document.getElementById('Landing_Zone').innerHTML=btoa(content['content']);
          }else{
              console.log(content.status);
          }
        }catch(error){
                  console.log(error);
              }
          }else{
              console.log('No connect');
          }
      }
  }
  request.open('post', '../Personnel.php', true);
  request.send(dataset);
}

 

 

[requinix]

There is no alternative to AJAX. You don't have to use jQuery for it in this age of fetch(), but IMO it's great for the kinds of DOM manipulation you'll be doing anyway.

First step: using your browser's developer tools, can you confirm that the AJAX request is sending the necessary data, to the right place, and receiving the necessary data in return?

[Strider64]

I love using fetch and full name can be used ->

JavaScript

function searchUser(fullName) {
  // Construct the SQL query as a string with a parameter placeholder
  const query = 'SELECT * FROM users WHERE full_name = ?';

  // Send a POST request to the PHP script with the SQL query and the user's full name as the request body
  fetch('search_user.php', {
    method: 'POST',
    body: JSON.stringify({ query: query, fullName: fullName })
  })
  .then(response => {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok.');
  })
  .then(data => {
    // Handle the response data
    console.log(data);
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });
}

// Call the searchUser function with the full name you want to search for
searchUser('John Smith');

Example being done in PHP

<?php
// Get the SQL query and the user's full name from the POST request body
$query = $_POST['query'];
$fullName = $_POST['fullName'];

// Create a new PDO object to connect to the database
$dsn = 'mysql:host=localhost;dbname=mydatabase';
$username = 'myusername';
$password = 'mypassword';

try {
  $pdo = new PDO($dsn, $username, $password);
} catch (PDOException $e) {
  echo 'Connection failed: ' . $e->getMessage();
  exit();
}

// Prepare the SQL query as a statement
$stmt = $pdo->prepare($query);

// Execute the statement with the user's full name as the parameter
$stmt->execute(array($fullName));

// Fetch the results as an associative array
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Send the results as JSON data to the client
header('Content-Type: application/json');
echo json_encode($results);
?>