javascript - 我已经构建了自动完成输入框(但是foucsout有问题)

Question

我已经构建了自动完成输入框(但是foucsout有问题)

观看这个: http://www.youtube.com/watch?v=IxlXWfJsSeM

演示: http://www.faressoft.org/autocomplete/

我的 HTML 代码:

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

我的 jQuery 代码:

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

结果应该像stackoverflow的标签输入框

<小时/>

从链接添加实际代码。 --帕特里克·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

好吧，我将 $(".autoCompleteList").hide(); 行添加到点击事件处理程序中，并稍微重写了代码:

$(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
});