Develop Reference

Jquery on click not working when focus is in a text box

I am creating a suggestion box below a search box. I want it so that when the user has focus in the search box, and then clicks on one of the suggestions, it triggers an action. I have tried using jquery's on:
$(".searchbox + div").on("click", "a", function() {
$(".searchbox").val($(this).html());
});
My HTML structure is like this:
<input type="search" placeholder="Search" class="searchbox">
<div></div>
The links are dynamically inserted inside the div that follows the input.
The links do not have an href value, so they are not really links, I just want them to act like links.
When I click on one of the links, the searchbox loses focus, and, because of the css I have, the links get visibility:hidden. I think the searchbox loses focus before the link action is triggered, so it never is triggered. How could I get around this?
You can see it here.
Clarification: What I think is happening:
User clicks on link
Computer thinks, The user just clicked outside of the search box
Search box becomes blurred
CSS sees that search box is blurred, styles say to now make the suggestions visibility:hidden
Now the links are no longer clickable, so the event is never triggered.

Somewhere in your code you have a click handler that brings the search bar to the top and the rest of the UI into view. It executes when the user clicks anywhere that's not the search bar. You should add a statement that checks if the clicked element was an <a> element in the suggestion box.
So if this is the click handler. Also i think it's time to add an id to your suggestion div.
$(document).click(function(e){
var $clicked = $(e.target);
if($clicked.tagName == 'A' && $clicked.closest('#suggestionDivId').length>0)
$(".searchbox").val($(this).html());
else if(click was outside searchbar)
//move searchbar up and show UI
else
//click happened inside searchbar, do nothing.
})
I'm not sure why nobody understands your question, or why this question is being downvoted. It's a perfectly valid question.
EDIT:
I suggest wrapping the input and suggestion div with another div. Give this wrapper an attribute of tabindex="-1" so it can receive blur/focus events.
<div id="wrapper">
<input type="search" placeholder="Search" class="searchbox">
<div></div>
</div>
Then change your $(".searchbox").on("blur") to $("#wrapper").on("blur")
This way you can click anywhere in the suggestion box without the blur firing.
Alternatively, the mousedown event fires before the blur event. So try this maybe
$(".searchbox + div").on("mousedown", "a", function() {
$(".searchbox").val($(this).html());
});

You can use some plugins for that. Its too easy. For example if you work with any front framework like bootstrap, you can use typeahead.js plugin

When I click on page all the text boxes must be minimize

I am using focus to text boxes, When I click on 2nd box, 1st box will minimize and 2nd box will maximize and I will upload all the text in that box after filling the text,I will click on page all the text boxes must be minimize,So please tell me how to hide all text boxes which is mentioned in that page when I click on white space beside text boxes.
I used pagewrapper to hide but it did not work,so please help me from this.

$(yourParentSelector).focusout(function(){
toggleYourBox(off);
});
$(yourBox).focus(function(){
toggleYourBox(on);
});
U may bind this functon on each box or just on the parent part

There might be n no. of text boxes so you would need to handle it on blur of every text box. so you should use body click
$("body").on("click",function(event){
var $element = $(event.currentTarget);
if($element.attr("type") !== "text"){
// write your code
}
})

Make a text clearable with a close button on click of Submit button

I need to implement a code in jquery, where I can enter any text in the text field, and then after I click on the "Submit" button, that text should turn into a clearable field something like this
I tried putting this box in my textfield, but this makes my whole text field as a clearable field,
$(document).ready(function(){
$('input[type=text]').clearableTextField();
});
I dont want to do this, I want that when i type something in the text field and click the Submit button, it should become a clearable text object.
Any help is appreciated!
Thanks.

One way to achieve this (similar to the way tag entry is done on Stack Overflow) is to have a separate div to the left of your input field into which "clearable text fields" are placed. When the submit button is clicked (or the spacebar is hit, or any trigger that javascript can listen for), have javascript create a new span within the left div, and reduce the width of the input field by the same width as the new span tag. You can include a delete button and any relevant styling in the HTML/CSS for the span.
A demo which achieves a similar effect through jQuery is available here: http://xoxco.com/projects/code/tagsinput/. (Suggested by #sachleen in response to a similar question)

How to show content of text box when I hover mouse on text box

I am creating above text box in my JSP file which getting populated in javascript(basically content inside textbox is dynamic not static). I want to display the content of text box when I take mouse over text box. Is there any function in javascript I can use for it?

Use the onmouseover event handler. Modify the input's text using the value property. You can also use an onmouseout event handler to clear the text when the mouse leaves the input if you need it. See it in this fiddle.
For instance:
<input id="anId" type="text"
onmouseover="this.value=calculateText(this.id)"
onmouseout="this.value=''">
Just in case you'd like to do the same thing when the <input> gets/loses the focus (by TAB for instance), use the onfocus and onblur event handlers.
UPDATE It turns out the OP wanted to dynamically change the title attribute of the input, so that it pops up in a tooltip when the mouse hovers over it. This can be achieved adding an onkeyuponinput event handler to the component that sets this.title to this.value. Learn more about oninput here.
<input type="text" oninput="this.title = this.value">

IE not rendering change in element display after changing it with javascript

Situation:
I have a check box and a div container inside another div container. When the check box or the label for the check box is clicked, the inner div's display style should change. If the display is set to block, then it should change to none and vice versa.
Code:
HTML:
<input id="oper_sale" type="checkbox" name="oper_sale" onchange="show_hide_operation(this, 'sale_block');">
<label for="oper_sale" class="public">Venta:</label>
<div id="sale_block" name="sale_block" style="display: none;">
AAAAAAA
</div>
Javascript:
// Show or hide parts of a form
function show_hide_operation (oper_choice, oper_block_id) {
var oper_block = document.getElementById(oper_block_id);
if (oper_choice.checked == true)
oper_block.style.display = "block";
else
oper_block.style.display = "none";
}
Problem:
This works fine in Firefox, but in IE it does not. When I click on the check box or its label, nothing happens. But, if I click anywhere else on the screen after clicking on the check box or its label, the change happens without a problem. I tried blurring the check box after it is click but it did not help.
In short:
IE does not render the change in display style until the user has click on a different part of the screen than what called the java script to change the style
Any help is greatly welcomed

IE doesn't fire .onchange for checkboxes until it loses focus, you may want to use the .onclick event here.

Use the onclick event, the change event in IE executes after the element loses focus.
Check this example.

In IE the onchange event obviously happens when the focus leaves the control, just as with an input with type="text".
Use the onclick event instead.