CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
Sohan Patel
Sohan Patel

Reputation: 183

jquery input field focus out except a div

I'm making ajax suggestion of search in which, a suggestion box will be displayed 

<div id="searchbox">
    <input type="text" name="search" class="searchinput"/>
</div>

<div id="sugbox">
 ......
 <a href="product.php?id=2" >Item 1</a>
 .....
</div>

and Javascript

$('#searchbox .searchinput').focus(
 function () {
    $('#searchbox #sugbox').show();
 });

 $('#searchbox .searchinput').focusout(
 function () {
    $('#searchbox #sugbox').hide();
 });

The suggestion box will open if the search textbox #searchbox .searchinput is focus and hide if focusout. Problem : whenever i'm clicking the link on suggestion box, the suggestion box hides (because of input focusout event).

How can i check if the target div is the suggestion box so don't hide the box ex ..

 $('#searchbox .searchinput').focusout(
 function () {
    if(target div is not sugbox)
        $('#searchbox #sugbox').hide();
 });

Upvotes: 3

Views: 2115

Answers (4)

KyawLay
KyawLay

Reputation: 403

try to assign a class to sugbox at hover class 

 $(".searchinput").focus(function(){
   $("#sugbox").show();
});
$(".searchinput").focusout(function(){
   if(!$("#sugbox").hasClass("hovered"))
   $("#sugbox").hide();
});
 $("#sugbox").hover(function(){
   $(this).addClass("hovered");
},function(){
   $(this).removeClass("hovered");
 });

here is example at jsfiddle : http://jsfiddle.net/kyawlay/9wg49L2b/5

Upvotes: 5

SSA
SSA

Reputation: 5483

Try this, What it does is when searchinput loses focus then if sugbox has no class 'NoHide', then hide it. On body on click event, the NoHide class is assigned to sugbox if click target is not searchinput and not sugbox and not sugbox anchor.

If event target is not in above 3 mentioned selectors then remove class NoHide. I have a fiddle but I want you to try in your page as fiddle will confuse you( as it has iframe and body area of fiddle is limited).

$('#searchbox .searchinput').focus(
 function () {

    $('#sugbox').show();
 });

 $('#searchbox .searchinput').focusout(
 function (event) {
        if(!$('#sugbox').hasClass('NoHide'))
        $('#sugbox').hide();
 });

$('body').on('click',
 function (event) {

    if(!$(event.target).is(".searchinput") && !$(event.target).is("#sugbox a") &&  !$(event.target).is("#sugbox")){
        $("#sugbox").hide().removeClass('NoHide');
    }else
    {
      $("#sugbox").show().addClass('NoHide');
    }
 });

Upvotes: 0

RajivRisi
RajivRisi

Reputation: 398

You are using wrong selector. Check this demo. http://jsfiddle.net/m711LLwr/

$('#searchbox #sugbox').show();

Should be

$('#mainsearch #sugbox').show();

Upvotes: 0

dmidz
dmidz

Reputation: 896

add a mousedown handler (triggerd before focusout/blur I think) on the box also, set a flag to true when clicked, then check this flag before hidding

var boxClicked = false;
$('#mainsearch .searchinput').mousedown(// listen click handler
 function () {   boxClicked = true;});
$(document).mousedown(// reset boxclicked
 function () {   boxClicked = false;});

$('#searchbox .searchinput').focus(
 function () {
    $('#searchbox #sugbox').show();
 });

 $('#mainsearch .searchinput').focusout(
 function () {
    if(!boxClicked)   $('#mainsearch #sugbox').hide();// add condition
 });

Upvotes: 1

Related Questions