jquery插件编写：文本框实现下拉框效果

先上代码：
jQuery.beDropdownlist.js

(function ($) {//jquery插件编写中，不能假设$是有效的，因此，使用这种包装函数，使得在下面的代码中可以继续写$,对于这个函数的分析，可以具体看下面的分析。
    $.fn.beDropdownlist = function (data, fn) {// $.fn对象是$.prototype的别名，使用fn为了简洁。

        //默认值
        var defaults = {
            data: ['nothing']
        }

        var options = { data: data };
        options = $.extend(defaults, options); //使得参数覆盖

        var bindevent = function (o) {
            var tmpid = "tmpselector_" + $(o).attr("id"); //生成临时的id
            if ($("#" + tmpid).length > 0)
                return; //退出，不在继续下去

            var data = options.data; //数据源

            //此处style中设置为absolute
            var html = "<div id='" + tmpid + "' style='border: 1px solid grey;max-height: 150px;position:absolute; overflow: auto;background:white;'><ul class='ui-menu'>";
            //动态生成一个div，内含li元素
            for (var item in data) {
                html += "<li>" + data[item] + "</li>";
            }
            html += "</ul></div>";
            var left = $(o).offset().left;
            var top = $(o).offset().top + $(o).height() + 4;

            var finalize = function () {
                $("#" + tmpid + " li").die('click'); //取消事件绑定
                $("#" + tmpid).remove();
            }
            $("body").append(html);
            //设置该div的宽度，位置等。
            $("#" + tmpid).width($(o).width() + 5);
            $("#" + tmpid).offset({ top: top, left: left });
            $("#" + tmpid).live('mouseleave', function () { finalize(); });
            $("#" + tmpid + " li").live('click', function () {
                $(o).val($(this).text());
                finalize();
                if (fn != undefined) {
                    fn(); //调用传进来的函数。
                }
            });
        }

        this.each(function () {//由于jquery的选择符可能匹配多个对象，所以需要用each，对每个匹配的元素做操作。
            if ($(this).is(":text") == true) {
                $(this).click(function () {
                    bindevent($(this)); //设置要做的内容
                })
            }
        });
    };
})(jQuery);

jQuery.beDropdownlist_demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="jQuery.beDropdownlist.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var city = ["上海", "北京", "西安", "哈尔滨", "广州", "深圳", "清远", "韶关", "河源", "梅州", "潮州", "汕头", "揭阳", "汕尾", "惠州", "东莞", "珠海", " 中山", "江门", "佛山", "肇庆", "云浮", "阳江", "茂名", "湛江"];
            $("#txtCity").beDropdownlist(city, function () { alert($("#txtCity").val()) });
            //$("#txtCity").beDropdownlist(city);
            var country = ["中国", "日本", "美国", "德国"];
            $("#txtCountry").beDropdownlist(country);
        });

    </script>
    <link rel="stylesheet" type="text/css" href="jQuery.beDropdownlist.css" />
</head>
<body>
    <br>
    <br>
    国家：<input type="text" id='txtCountry' value="" />
    城市：<input type="text" id='txtCity' value="" />
</body>
</html>

编写jquery有几点注意：
$.fn对象是$.prototype的别名，使用fn为了简洁。

补充：web前端 , JavaScript ,