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

The CSS styling for the <body> element is not rendering the expected results

Tips on preventing a nested loop's inner ng-repeat from updating when the array undergoes changes

Disable the ng-change event

Pause animation when hovering over their current positions

How can a JQuery ajax success function access the parent object it resides in?

What is the best way to handle multiple JSON data using jQuery?

Button missing post ajax loading

The function addClass() seems to be malfunctioning

Rendering Local HTML with local styling and scripts in React Native Webview

Changing the value of an input in an HTML response received through an AJAX request

What is the best method for positioning two forms in a vertical arrangement?

Text randomly appears on the html page

Innovative approach to implement dynamic datepicker using jQuery

Imagine a scenario where clicking on an image causes it to be rotated or

What is the best way to update the content of a modal using jQuery and AJAX?

Converting a webpage into UTF-8 format

Ways to implement the tabIndex attribute in JSX

Guidelines for comparing two distinct dates using jQuery

Avoiding the default action and using a false return value do not produce the

Initiate the AJAX call when the page is loaded