Jquery autosuggestion close when click everywhere

Question

I have an Jquery Autosuggest dropdown. The function is running ok.

Now I want when I right click or click everywhere the display box must be keep show. Because I found problem when autosuggest search have a link. The link can't open because before click link the dropdown box closed.

Here it my JS code so far :

$(document).ready(function(){
    $(".searchs").keyup(function()
    {
       var searchbox = $(this).val();
       var dataString = 'searchword='+ searchbox;
       if(searchbox=='')
       {
        $("#display").hide();
       }
       else
       {
          $.ajax({
              type: "POST",
              url: "searchs.php",
              data: dataString,
              cache: false,
              success: function(html)
              {
                 $("#display").html(html).show();
              }
           });
        }
       return false;
    }); 

        $(".searchs").blur(function(){
             $("#display").hide();
    });

    $(".searchs").focus(function(){
    var seachbox = $(searchbox).val();
    if(seachbox != '')
    {
       $("#display").show();
    }
    });
});

Someone have an idea ?

can you provide a link of the jquey autosuggest you are using? — Krish, Dec 03 '12 at 05:27
Possible duplicate of this : http://stackoverflow.com/questions/9149026/keep-ui-autocomplete-open-at-all-times — Ravi Maniyar, Dec 03 '12 at 05:30
possible duplicate of [jQuery dropdown hide when mouseover and continue search when back mouseover to textbox](http://stackoverflow.com/questions/13657504/jquery-dropdown-hide-when-mouseover-and-continue-search-when-back-mouseover-to-t) — Alexander, Dec 03 '12 at 08:02

score 0 · Answer 1 · answered Dec 03 '12 at 06:01

0

this the way to keep showing AutoComplete result list: DEMO

$("#tags").autocomplete({
source: availableTags,

 close : function (event, ui) {
     val = $("#tags").val();
     $("#tags").autocomplete("search", val).focus();
    return false;  
  }
});

answered Dec 03 '12 at 06:01

Ashwini Verma

7,477
6
36
56

score 0 · Answer 2 · answered Dec 03 '12 at 06:08

The reason your drop down box is closing is because whenever you deselect you 'searchs' class, you hide the drop down box. To fix this, you can try a couple different things.

1: put your drop down box(the one with an id of 'display') in the the 'searchs' class. that would look something along the lines of:

<div id = "display" class = "searchs"></div>

2: when your $(".searchs").blur event is triggered, before executing $("#display").hide(); check if the new focus is your display div:

$(".searchs").blur(function(){
  if($("#display").blur(function(){ //<--- if the new focus is not the display div, then hide display
    $("#display").hide();
  }
});

Jquery autosuggestion close when click everywhere

2 Answers2