Clever Geek Handbook

JQuery input box besides div

I am doing an ajax search suggestion in which a suggestion box will appear

<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 prompt box will open if the search text box is #searchbox .searchinput

equal focus

and hide if focusout

. Problem: whenever I click a link on the suggestion box, the suggestion box hides (due to an input focus event).

How can I check if the target div is an offer field, so don't hide the ex window ..

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


source to share


4 answers


try to assign sugbox class in 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 an example in jsfiddle: http://jsfiddle.net/kyawlay/9wg49L2b/5

+2


source


add a mousedown handler (triggerd before focusout / blur I think) to the field, also set the flag to true when clicked, and then check that flag before doing



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
 });
+1


source


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

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

Should be

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


source


Try this, what does it do when searchinput loses focus, and if sugbox has no class 'NoHide' then hide it. On the body in the click event, the NoHide class is assigned to sugbox if the target click is not a search one, not a sugbox, not a sugbox anchor.

If the event target is not above the 3 specified selectors, then remove the NoHide class. I have a fiddle, but I want you to try on your page as the fiddle will confuse you (since it has an iframe and the body area of ​​the 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');
    }
 });
0


source






More articles:


All Articles