Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Abe Layee
Abe Layee
8,378 Points
Posted by Abe Layee
Abe Layee
8,378 Points

clear the output field once the mouse leaves

I am trying to clear the output field once the mouse leaves. Here is my html, js, and php file. I am searching for user through the database. However, once I clear the input filed, the result still appears. Thank you

 <div class="inner-addon left-addon">
            <i class="glyphicon glyphicon-search"></i>
            <input class="form-control" type ="text" id ="search"  placeholder="search for employees..." onkeyup="search(this.value)">
            <div id ="results"></div>
        </div>

function search(value) {
   $.post("employees.php", {search:value}, function(data){
     $("#results").html(data);

     $("search").on("mouseout", function () {
        $("#results").html(data) = " "; // this doesn't work
     })
   });
}

<?php
session_start();
 include_once "db.php";
 if(!$_SESSION['email']) {
    header("Location:index.php");
    exit();
 }

   $search = $_POST['search'];
   $query = "SELECT * FROM employees WHERE firstName LIKE '%$search%' OR lastName LIKE '%$search%' ";
   $query = mysqli_query($connect,$query);

   while($row= mysqli_fetch_array($query)) {
     echo  $row['firstName']. "  ". $row['lastName'];

 }

?>

1 Answer

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,967 Points

I simplified the javascript to exclude the php and database so I could test

function search(value) {

    $("#results").html(value);

    $("#search").on("mouseout", function () {
        console.log("triggered")  
        $("#results").html("")
     })
}

but this appears to be closer to what you are looking for. One thing missing in your code is the # before search. Also if you watch the console you'll see the mouseout event doesn't trigger until you leave, come back and leave a second time so there may be a better event to choose.

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

Thank you for the feedback. I came out with a solution. I checked the if the value is equal to zero, then I set the results to empty space and it works.

function search(value) {

      if(value.length == 0) 
      {
        $("#results").html("");

      }  else {
        $.post("employees.php", {search:value}, function(data){
            $("#results").html(data);

          });

      }
 }