In my attendance app, I’ve noticed a bug that recently appeared.
As I type out a person’s name and select a person’s name, the field populates with the following:
How can I remove all of this whitespace and have one space in between each word? It doesn’t look professional…
There are two files that control the search function, one javascript file called member_search.js
$(document).ready(function(){
$('.search-box input[type="text"]').on("keyup input", function(){
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(inputVal.length){
$.get("api/search/backend-search.php", {term: inputVal}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
});
} else{
resultDropdown.empty();
}
});
// Set search input value on click of result item
$(document).on("click", ".result p", function(){
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});
and a second PHP file called backend-search.php:
<?php
require '../dbconnect.php';
if(isset($_GET["term"])) {
$terms = array_filter(array_map('trim',explode(',',$_GET['term'] . '%')));
if(!$terms)
{
$where_terms = [];
$params = [];
}
// add the last name
$where_terms[] = "last_name LIKE ?";
$params[] = $terms[0];
// determine if there's a first name
if(count($terms) > 1)
{
// add the first name
$where_terms[] = "first_name LIKE ?";
$params[] = $terms[1];
}
// build the WHERE... part of the query
$where_term = '';
if(!empty($where_terms))
{
$where_term = "WHERE " . implode(' AND ', $where_terms);
}
// build the sql query with whatever WHERE term was produced above
$sql = "SELECT id, last_name, first_name, middle_name, suffix, precinct,
residential_address FROM members $where_term";
$stmt = $pdo->prepare($sql);
$stmt->execute($params);
$result = $stmt->fetchAll();
if(!$result) {
echo "<p>No records found</p>";
} else {
foreach($result as $row) {
echo "<p>{$row['id']} - {$row['last_name']}, {$row['first_name']}
{$row['middle_name']} {$row['suffix']} ({$row['precinct']}) |
{$row['residential_address']}</p>";
}
}
}
What am I doing wrong? I can’t seem to find the problem…
droop was checking to see if you’ve got a lot of spaces after the “Jeremy” in your database and didnt realize it.
My theory was that your multiline string was carrying all of the spaces here:
echo "<p>{$row['id']} - {$row['last_name']}, {$row['first_name']}
ALL OF THIS STUFF HERE{$row['middle_name']} {$row['suffix']} ({$row['precinct']}) |
AND HERE{$row['residential_address']}</p>";
forwards and transforming it into nonbreaking spaces instead of condensing it into a single space.
The result class in the HTML defines that as shown in the member_search.js file:
// Set search input value on click of result item
$(document).on("click", ".result p", function(){
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
...
<div class="result"></div>
</div>
...
The js file is also called before the page content is displayed:
What I was asking to see was the result of that PHP code. Not the PHP code, not an image of the browser output, but the actual HTML code that results from the PHP script.
Or is it that the content shown in the screen shot is not in the HTML, but generated via the js?
