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

我已经建立了自动完成输入框（但是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的标签输入框



从链接添加实际代码。 -帕特里克·德沃

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

最佳答案

好的，我在点击事件处理程序中添加了$(".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
});

关于javascript - 我已经建立了自动完成输入框(但是foucsout存在问题)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3961546/