blurring out of an input field and a division element

Question

blurring out of an input field and a division element

I am currently working on creating a dropdown suggestion box that hides when the input field and dropdown box are no longer in focus.

My HTML code:

<input type="text" id="user_address">
<div id="user_address_sg">SUGGESTION</div>

<div id="another element">Pressing another element on the page should hide the suggestion box</div>

I have attempted the following:

$('[id=user_address][id=user_address_sg]').focusout(function (){
    $('#user_address_sg').hide();
});

Why isn't the user_address_sg hiding when I select another input field or other elements on the page?

Images (1st: When typing a name, 2nd: Selecting another form while suggestions appear)

First image: The suggestion box should be displayed and clickable

https://i.sstatic.net/UwlFh.png

Second image: The suggestion box should disappear upon doing this

https://i.sstatic.net/60PCo.png

javascript jquery html css

Answer 1

Answer №1

UPDATED: Here is an alternative using CSS:

function provideSuggestion(selection) {
document.getElementById('user_input').value = document.getElementById(selection).innerHTML;  
 }

#user_input_sg {
  vertical-align: top;
  text-decoration: none;
  display: none;
  color:black;  
}

#user_input_sg:focus, #user_input_sg:active {
  display: inline-block;
  color:black;
}

#user_input:focus ~ #user_input_sg {
  display: inline-block;
}

<input type="text" id="user_input">
<a href=# id="user_input_sg">
<span id=opt1 onClick="provideSuggestion('opt1')">OPTION 1</span><br>
<span id=opt2 onClick="provideSuggestion('opt2')">OPTION 2</span><br>
<span id=opt3 onClick="provideSuggestion('opt3')">OPTION 3</span><br>
<span id=opt4 onClick="provideSuggestion('opt4')">OPTION 4</span>
</a>

Answer 2

UPDATED: Here is an alternative using CSS:

function provideSuggestion(selection) {
document.getElementById('user_input').value = document.getElementById(selection).innerHTML;  
 }

#user_input_sg {
  vertical-align: top;
  text-decoration: none;
  display: none;
  color:black;  
}

#user_input_sg:focus, #user_input_sg:active {
  display: inline-block;
  color:black;
}

#user_input:focus ~ #user_input_sg {
  display: inline-block;
}

<input type="text" id="user_input">
<a href=# id="user_input_sg">
<span id=opt1 onClick="provideSuggestion('opt1')">OPTION 1</span><br>
<span id=opt2 onClick="provideSuggestion('opt2')">OPTION 2</span><br>
<span id=opt3 onClick="provideSuggestion('opt3')">OPTION 3</span><br>
<span id=opt4 onClick="provideSuggestion('opt4')">OPTION 4</span>
</a>

Answer 3

Answer №2

To ensure proper functionality, it is important to use the blur event and separate the selectors with commas. This is because a single element cannot have two different ids, but two different elements can have different ids. Therefore, it is necessary to separate them like so:

$('[id=user_address],[id=user_address_sg]').blur(function (){
    $('#user_address_sg').hide();
});

For better results, consider using the on() method:

$('[id=user_address],[id=user_address_sg]').on('blur', function (){
    $('#user_address_sg').hide();
});

The blur event occurs when an element loses focus, which seems to be what you are looking for in this case.

Answer 4

To ensure proper functionality, it is important to use the blur event and separate the selectors with commas. This is because a single element cannot have two different ids, but two different elements can have different ids. Therefore, it is necessary to separate them like so:

$('[id=user_address],[id=user_address_sg]').blur(function (){
    $('#user_address_sg').hide();
});

For better results, consider using the on() method:

$('[id=user_address],[id=user_address_sg]').on('blur', function (){
    $('#user_address_sg').hide();
});

The blur event occurs when an element loses focus, which seems to be what you are looking for in this case.

blurring out of an input field and a division element

Answer №1

Answer №2

Similar questions

How can I store the value of `$_POST['data']` in a jQuery variable?

Create a copy of a JQuery slider

Error occurs in ReactJS App when the state is updated in Redux only after dispatching the same action twice

Mobile devices are having issues with CSS rendering

Exploring Angular modules has shed light on a certain behavior that has left me puzzled - specifically, when diving into JavaScript code that includes the

Asynchronous Middleware in ExpressJS Routing

What is the best way to center-align my list within the designated area?

Adjusting the array of buttons with various functions within the Header component

No reply received on the web browser

The .val() method is compatible with input fields, but does not work

Tips for maintaining the footer at the bottom of the page regardless of the screen size

Utilize user input to fetch data from an external API

What happens with JQuery if the JQuery IIFE does not get executed properly?

Instructions for integrating AJAX into a PHP script

Several buttons sharing the same class name, however, only the first one is functional

Challenges with text in a Bootstrap 5 responsive carousel

Arranging adjacent div blocks to maintain alignment in a stylish way

Turn off jQuery autocomplete box

Can anyone please guide me on how to extract the IP address of a specific individual using Node.js?

Apple's iPhone does not adhere to media query specifications