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

Second image: The suggestion box should disappear upon doing this

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

Rotate each row of the table in sequence with a pause between each flip

Tips on correctly determining font size

Using an if statement within a map function in a React component

Unicef's animated web content

Struggling to retrieve data from AJAX call

Having trouble understanding how to incorporate jQuery GetListItems with SharePoint SOAP - it seems simple, but can't figure it out!

What are your thoughts on the practice of utilizing the useState hook within a component to send data to its parent component?

Is there a more effective method for detecting changes in a class variable in JavaScript, aside from using setInterval()?

Debugging TypeScript on a Linux environment

Having trouble retrieving the chosen option from the select elements

When trying to retrieve a value from a custom render function in React with TypeScript, an error occurs indicating that the value is not assignable to type 'ReactNode'

Error message encountered: "TypeError with jQuery autocomplete and ajax

The issue with fetching user profile data on the client-side in Next.js 14

Utilizing Vue.js i18n for a multi-line text display

Having trouble getting the video to load on your Mozilla Firefox browser?

Retrieve the value of the specific element I have entered in the ngFor loop

Once the print dialog is canceled or saved, the current window remains open

Validating minimum and maximum values with Angular 2 FormBuilder

Tips for populating class attributes from an Angular model

How can I implement the ternary operator in React Native and resolve my code issue?