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的标签输入框

从链接添加实际代码。 --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

好的，我将$(".autoCompleteList").hide();行添加到click事件处理程序并重新编写代码：

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

我已经建立了自动完成输入框（但是有一个问题与foucsout）

1 个答案: