hide div

[mrhankey]

hi,

i am using autcomplete to call my php page which displays results. all is working except when they click off the list it does not hide the search results again.

so searching works and so does selecting from the results but if they did not want to select a result and click off back to the page i need it to hide the results.

code:

<script type="text/javascript">
$(function(){
$(".search").keyup(function() 
{ 
var inputSearch = $(this).val();
var dataString = 'searchword='+ inputSearch;
if(inputSearch!='')
{
    $.ajax({
    type: "POST",
    url: "search.php",
    data: dataString,
    cache: false,
    success: function(html)
    {
    $("#divResult").html(html).show();
    }
    });
}return false;    
});

jQuery("#divResult").live("click",function(e){ 
    var $clicked = $(e.target);
    var $name = $clicked.find('.name').html();
    var decoded = $("<div/>").html($name).text();
    $('#inputSearch').val(decoded);
});
jQuery(document).live("click", function(e) { 
    var $clicked = $(e.target);
    if (! $clicked.hasClass("search")){
    jQuery("#divResult").fadeOut(); 
    }
});
$('#inputSearch').click(function(){
    jQuery("#divResult").fadeIn();
});
});
</script>
<style type="text/css">
    body{ 
        font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    }
    .contentArea{
        width:100%;
        margin:0 auto;
    }
    #inputSearch
    {
        width:15%;
        border:solid 1px #000;
        padding:3px;
    }
    #divResult
    {
        position:absolute;
        width:25%;
        display: none ;
        margin-top:-1px;
        margin-left:70%;
        border:solid 1px #dedede;
        border-top:0px;
        overflow: visible;
        border-bottom-right-radius: 6px;
        border-bottom-left-radius: 6px;
        -moz-border-bottom-right-radius: 6px;
        -moz-border-bottom-left-radius: 6px;
        box-shadow: 0px 0px 5px #999;
        border-width: 3px 1px 1px;
        border-style: solid;
        border-color: #333 #DEDEDE #DEDEDE;
        background-color: white;
        color:#000;
        position: absolute;
          z-index: 10000 !important; 
    }
    .display_box
    {
        padding:4px; border-top:solid 1px #dedede; 
        font-size:12px; height:50%;
    }
    .display_box:hover
    {
        background:#3bb998;
        color:#FFFFFF;
        cursor:pointer;
    }
</style>

this is in my pages.

then on search.php page:

<div class="display_box" align="left" >
<img src="images/icons/web-app/32/Profile.png" border="0" align="left"  style="float:left; margin-right:1%;" /><span style="font-size:14px; color:#000"><?php echo $name; ?></span><br/>
 <br /></div></a>

thanks

[AleMonteiro]

Hi,

if you check the default example in http://jqueryui.com/autocomplete/ you'll see that the default functionality is exactly what you want.
You don't need any extra event handling to make this happen.

Try updating to the last version of jQuery UI.