I have built autocomplete input box (but there is a problem with foucsout)

Question

I have built autocomplete input box (but there is a problem with foucsout)

Watch this : http://www.youtube.com/watch?v=IxlXWfJsSeM

Demo: http://www.faressoft.org/autocomplete/

My HTML Code :

<div class="autoCompleteDiv">
    <input type="text" value="" size="60" name="countryName" id="countryName" class="autocomplete">
    <ul class="autoCompleteList"></ul>
</div>

My jQuery Code :

$(".autocomplete").focusout(function() {
$(".autoCompleteList").css("display","none");
});

result should be like the tags input box of stackoverflow

---

Adding actual code from link. --patrick dw

$(document).ready(function(){  
    $(".autocomplete").attr("value","");
    $(".autocomplete").keyup(function() {
        $(".autoCompleteList").css("display","none");
        if ($(this).attr("value")!="") {
            $(".autoCompleteList").width($(this).width()+3);
            $(".autoCompleteList").css("display","block");
            var Value = $(this).attr("value");
            $.ajax({
            type: "GET",
            url: "Tags.php",
            data: "country=" + Value,
            dataType: "html",
            success: function(data) {
                if (data!="") {
                    $(".autoCompleteList").html(data);
                    var re = new RegExp("(" + Value + ")", "gi");
                    $('.autoCompleteList').html($('.autoCompleteList').html().replace(re, '<span>$1</span>'));
                    $(".autoCompleteList li").click(function() {
                        $(".autocomplete").attr("value", $(this).text());
                    });
                } else {
                    $(".autoCompleteList").css("display","none");
                }
            }
            }); 
        }
    });
    $(".autocomplete").focusout(function() {
        //$(".autoCompleteList").css("display","none"); Watch the video. I can't choose the country.
    });         
});

Answer 1

Okay i added the $(".autoCompleteList").hide(); line to the click event handler and rewrote the code a little bit:

$(function(){ // shorthand for doc.ready     
    (function(){     
        var $input = $(".autocomplete"), // caching
            $list = $(".autoCompleteList");
       $input.attr("value","").keyup(function() {
            $list.hide();
            if ($(this).attr("value")!=="") {
            $list.width($(this).width()+3).show();      
            var val = $(this).attr("value"); // dont use value as varaiable name
            $.ajax({
            type: "GET",
            url: "Tags.php",
            data: "country=" + val,
            dataType: "html",
            success: function(data) {
            if (data!=="") {
                //replacing data 
                var re = new RegExp("(" + val + ")", "gi");
                data = data.replace(re, '<span>$1</span>');
                $list.html(data);

                // binding click 
                    $(".autoCompleteList li").bind('click', function() {
                    $(".autocomplete").attr("value", $(this).text());
                    $(".autoCompleteList").hide();
                    });

            } else {
                $list.hide();
            }
            }
            }); 
        }
    });
    })(); // self executing
});