PHP PDO Member Search returns with whitespace when selected

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

    $('.search-box input[type="text"]').on("keyup input", function(){
        /* Get input value on change */
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".result");
            $.get("api/search/backend-search.php", {term: inputVal}).done(function(data){
                // Display the returned data in browser
        } else{
    // Set search input value on click of result item
    $(document).on("click", ".result p", function(){

and a second PHP file called backend-search.php:


require '../dbconnect.php';

if(isset($_GET["term"])) {
	$terms = array_filter(array_map('trim',explode(',',$_GET['term'] . '%')));

    $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 = '';
			$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);
      $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']}) |

What am I doing wrong? I can’t seem to find the problem…

out of curiosity, what happens when you dont make this multiple lines?

1 Like

What’s actually in the first_name column?

If I don’t make that snippet in multiple lines, it’s fixed.


What I don’t understand is why that happened in the first place?

The member’s first name… what else would go there?

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.

Ohh, that makes sense. No, it just the first name. No extra spaces.

^ Yes, I wondered if it had spaces that might have been converted to non-breaking spaces somehow.

What does the resulting HTML look like?

Try this:

foreach (...) {
$lastName = trim( $row['last_name'] ) . ‘-‘ ;
// repeat for other variables then concatenation 

Not tested and tapped on a tablet

echo "<p>{$row['id']} - {$row['last_name']}, {$row['first_name']} {$row['middle_name']} {$row['suffix' ({$row['precinct']}) | {$row['residential_address']}</p>";

That is the PHP that writes the HTML. I asked about the resulting HTML.
As in, run the script in your browser and view the source. What do you see?

See my screenshot in post #4

I don’t see any HTML there, just a screen-shot.

<form action="record_attn.php" method="post" id="record">
		<div class="form-group search-box">
			<label for="member_id">Member Search</label>
			<input type="text" class="form-control" id="member_id" 
              name="member_id" placeholder="Enter Member's Last Name" maxlength=""
              autocomplete="off" autofocus="autofocus" required />
			<div class="result"></div>
                (remainder of form here)

That bears no resemblance to what I would expect to result from this:-


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(){
<div class="result"></div>

The js file is also called before the page content is displayed:

<script src="js/member_search.js"></script>

What were you expecting from the HTML listed in post #14?

From this:-

echo "<p>{$row['id']} - {$row['last_name']}, {$row['first_name']} {$row['middle_name']} {$row['suffix' ({$row['precinct']}) | {$row['residential_address']}</p>";

…I would expect to see a pair of <p> tags, with some content inbetween them.

I’m confused… That’s exactly what you’re seeing being echoed in the PHP code.

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?

Yes… the screenshot is the result of what is generated through JS and PHP… It is being called upon in HTML :man_facepalming: