Having trouble with the focusout() function not registering on the search box?

Question

Having trouble with the focusout() function not registering on the search box?

When using the focusout function, I encountered an issue where clicking on a title in the search results would prevent redirecting to the title page. Although the function worked properly when closing the search results by clicking on a different element on the page, the results also closed when clicked on.

I attempted using the blur function as well as hide() and show(), but the outcome remained the same. Even though I have set .result display to none, it should not hinder me from selecting a search result. What could be causing this issue?

// jquery.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("includes/searchbar.inc.php", {
        term: inputVal
      }).done(function(data) {
        // Display the returned data in browser
        resultDropdown.html(data);
        $('.result').css('display', 'block');

        $("#searchboxy").focusout(function() {
          $('.result').css('display', 'none');
        });
        $("#searchboxy").focusin(function() {
          $('.result').css('display', 'block');
        });

      });
    } else {
      resultDropdown.empty();

    }
  });

  // Set search input value on click of result item
  $(document).on("click", ".result", function() {
    $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
    $(this).parent(".result").empty();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- header.php -->

<div class="search-box" id="searchboxy">
  <input type="text" autocomplete="off" placeholder="Search for a game or genre..." />
  <div class="result" id="resultsearch"></div>
</div>

html jquery css

Answer 1

Answer №1

The issue with your code was the focusout event handler triggering every time the search input lost focus, including when clicking on the results.

This caused the click event on the results to be triggered after the hide action in the first handler, preventing it from working as intended.

To address this, a better approach is to attach a click event handler to the entire document and check if the clicked element has the parent #searchboxy. If it does, hide the results; otherwise, leave them visible.

In the demo, I simulated a custom result from your API without clear data, which you displayed without manipulation.

I also revised how you captured click events on the result items by attaching the event handler once to the parent results.

// Your fetch replaced with an unreachable URL
const makeSearch = (term) => {
  return new Promise((resolve, reject) => {
    resolve(`
      <ul>
        <li>Result1</li>
        <li>Result2</li>
        <li>Result3</li>
      </ul>`
    );    
  });
}

// Click event on the document
$(document).on('click', function(event){  
  // Hide .result if clicked element doesn't belong to #searchboxy group
  if(!event.target.closest('#searchboxy')){
    $('.result').css('display', 'none');
  }
});

// Show .result on input text focusin
$("#searchboxy").on('focusin', function() {      
  $('.result').css('display', 'block');
});

// Click event on .result box...
$(document).on("click", ".result", function(event) {  
  const textOfClickedResultElement = event.target.innerText;  
  $(this).parents(".search-box").find('input[type="text"]').val(textOfClickedResultElement);
  $(this).parent(".result").empty();
});

$(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("includes/searchbar.inc.php", {
      //  term: inputVal
      //})
      
      // Replaced search request for demo purposes
      makeSearch(inputVal)
        .then(function(data) {          
          // Display returned data in browser
          resultDropdown.html(data);
          $('.result').css('display', 'block');
        });
    } else {
      resultDropdown.empty();
    }
  });
  
});

.info{
  margin-bottom: 10px;
}

#searchboxy{
  border: dashed 3px lightgray;
  padding: 10px 10px;
}

#searchboxy input{
  width: 15rem;
}

#resultsearch{
  border: solid 1px gray;
  display: none;
  margin-top: 1rem;
}

#resultsearch li{
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="info">
  Start typing inside the textbox to show the search results.<br>
  Clicking anywhere outside the dashed borders will hide the results.<br>
  Giving focus to the textbox will show the results.<br>
  Clicking any single result item will push its value into the search box.
</div>

<div class="search-box" id="searchboxy">
  <input type="text" autocomplete="off" placeholder="Search for a game or genre..." />
  <div class="result" id="resultsearch"></div>
</div>

Answer 2

The issue with your code was the focusout event handler triggering every time the search input lost focus, including when clicking on the results.

This caused the click event on the results to be triggered after the hide action in the first handler, preventing it from working as intended.

To address this, a better approach is to attach a click event handler to the entire document and check if the clicked element has the parent #searchboxy. If it does, hide the results; otherwise, leave them visible.

In the demo, I simulated a custom result from your API without clear data, which you displayed without manipulation.

I also revised how you captured click events on the result items by attaching the event handler once to the parent results.

// Your fetch replaced with an unreachable URL
const makeSearch = (term) => {
  return new Promise((resolve, reject) => {
    resolve(`
      <ul>
        <li>Result1</li>
        <li>Result2</li>
        <li>Result3</li>
      </ul>`
    );    
  });
}

// Click event on the document
$(document).on('click', function(event){  
  // Hide .result if clicked element doesn't belong to #searchboxy group
  if(!event.target.closest('#searchboxy')){
    $('.result').css('display', 'none');
  }
});

// Show .result on input text focusin
$("#searchboxy").on('focusin', function() {      
  $('.result').css('display', 'block');
});

// Click event on .result box...
$(document).on("click", ".result", function(event) {  
  const textOfClickedResultElement = event.target.innerText;  
  $(this).parents(".search-box").find('input[type="text"]').val(textOfClickedResultElement);
  $(this).parent(".result").empty();
});

$(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("includes/searchbar.inc.php", {
      //  term: inputVal
      //})
      
      // Replaced search request for demo purposes
      makeSearch(inputVal)
        .then(function(data) {          
          // Display returned data in browser
          resultDropdown.html(data);
          $('.result').css('display', 'block');
        });
    } else {
      resultDropdown.empty();
    }
  });
  
});

.info{
  margin-bottom: 10px;
}

#searchboxy{
  border: dashed 3px lightgray;
  padding: 10px 10px;
}

#searchboxy input{
  width: 15rem;
}

#resultsearch{
  border: solid 1px gray;
  display: none;
  margin-top: 1rem;
}

#resultsearch li{
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="info">
  Start typing inside the textbox to show the search results.<br>
  Clicking anywhere outside the dashed borders will hide the results.<br>
  Giving focus to the textbox will show the results.<br>
  Clicking any single result item will push its value into the search box.
</div>

<div class="search-box" id="searchboxy">
  <input type="text" autocomplete="off" placeholder="Search for a game or genre..." />
  <div class="result" id="resultsearch"></div>
</div>

Having trouble with the focusout() function not registering on the search box?

Answer №1

Similar questions

Angular - CSS Grid - Positioning columns based on their index values

403 error: jQuery Ajax POST denied

The deletion request using the form in Express is experiencing issues and not functioning properly

Which specific CSS attributes should be applied to create a scroll bar within this table?

Ensure that the Materialize CSS modal form remains open even after submission

Having an Issue with the jQuery .get Method

Scrape embedded content within an IFrame on a webpage with Java

Retrieve the jquery.data() of an element stored in an HTML file using JavaScript or jQuery

Displaying each character of text individually with jQuery

What can be done to stop a header from sticking to a table and displaying horizontally scrolling content along the border?

What steps do I need to take in order for my web controls to show up on top of an activex

Can a single value be stored in a table using a radio button?

What is the best way to place a parent div above its child element?

Step-by-step guide on inserting an image directly into an HTML file without utilizing LinkedResource or CDO

Ways to emphasize the index navigation link when on the main page

The Autoprefixer script crashes with the error message: TypeError - Patterns can only be a string or an array of strings

Unique rewritten text: "Displaying a single Fancybox popup during

Adjusting the background color of an individual element within a grid using CSS

The jQuery slider does not abruptly halt when the mouse is clicked and released

CSS Switchable Style Feature