自己做jQuery开源插件之三：文本框自动提示插件

今天做一个有点复杂的jQuery插件，文本框自动提示插件，之所以说有点复杂，是因为这个插件涉及到了传参数和回调函数，其他的都和之前做的插件差不多，好了，直接进入正题，首先我们新建一个js文件，MyAutoComplete.js和一个css文件，MyAutoComplete.css，打开MyAutoComplete.js，还是先写好jQuery插件的标准代码框架，如下所示：

(function ($) {
    $.fn.MyAutoComplete= function (params) {
	//此处写插件核心代码
	return this;
    }
 $.fn.MyAutoComplete.DefaultParams = {
                width: $(this).width(),
                data: null,
                callback: null
            }
})(jQuery)

        这个插件比其他的复杂的地方大家应该已经看出来了，是的，这个插件可以带参数了，究竟要传什么参数呢？这里我们自定义了一组默认的参数，就是$.fn.MyAutoComplete.DefaultParams里的键值对，我们看到有三个参数，width、data和callback，width表示自动提示框的宽度，默认是当前调用对象的宽度，data表示自动提示的所有值（目前只支持数组格式，有兴趣的可以继续扩展），callback表示回调函数。

        好了，现在开始写插件核心代码，首先我们把用户传过来的参数和默认参数合并，如下所示;

$.extend($.fn.MyAutoComplete.DefaultParams, params);

然后，我们在页面body标签内添加一个div，这个div就是自动提示框，如下所示：

 $("body").append("<div id='MyAutoComplete' class='Myautocomplete-layout'></div>");

好了，现在我们需要自动提示的文本框做处理，当用户输入信息后，要展示自动提示框，自动提示框里放置匹配的值，如下所示;

var $this = $(this);
                this.keyup(function () {
                    var text = $this.val();
                    var data = $.fn.MyAutoComplete.DefaultParams.data;
                    var rightData = [];
                    $.each(data, function (index, item) {
                        if (item.indexOf(text) > -1) {
                            rightData.push(item);
                        }
                    });
                    $("#MyAutoComplete").width($.fn.MyAutoComplete.DefaultParams.width);
                    $("#MyAutoComplete").css("left", $this.offset().left);
                    $("#MyAutoComplete").css("top", $this.offset().top + $this.height());
                    MyFunctions.makeContAndShow(rightData);
                });

上面代码中，我们遍历data数组，把数组里面包含用户输入的值的项全部放入另一个数组rightData，然后我们把自动提示框的宽度设置成传入的宽度值，把自动提示框的left和top设置一下，这样就能保证自动提示框始终位于文本框的下方，接着我们调用了makeContAndShow()这个函数，这个函数主要是把rightData数组中的值放入一个table元素中，然后把table元素加入到自动提示框内，如下所示：

var MyFunctions = {
                    makeContAndShow: function (data) {
                        if (data == null || data.length <= 0) {
                            return;
                        }
                        else {
                            var table = "<table><tbody>";
                            $.each(data, function (index, item) {
                                table += "<tr><td><div>" + item + "</div></td></tr>";
                            });
                            table += "</tbody></table>";
                            $("#MyAutoComplete").html(table);
                            $("#MyAutoComplete").show();
                        }
                    }
                };

代码写到这边，已经基本实现自动提示的功能了，但还不够，我们需要让用户可以滑动鼠标选择提示框内的值并在文本框中展示，代码如下：

//鼠标滑动                 
                $("#MyAutoComplete").delegate("tr", "mouseover", function () {
                    $("#MyAutoComplete tr").removeClass("ct");
                    $(this).addClass("ct");
                }).delegate("tr", "mouseout", function () {
                    $("#MyAutoComplete tr").removeClass("ct");
                }).click(function () {
                    $this.val($("#MyAutoComplete").find(".ct").text());
                    $("#MyAutoComplete").hide();
                    $.fn.MyAutoComplete.DefaultParams.callback($this.val());
                });

如上所示，我们给table中的tr添加mouseover事件，鼠标移上时给当前tr添加ct样式，高亮当前行，鼠标移出时移除ct样式，鼠标点击时，根据ct样式找到那一行然后获取该行的text值传到文本框中，然后隐藏提示框，最后，我们把选中的值传到回调函数，这样使用插件的时候，我们就可以从回调函数中获取用户选择的值。

最后，我们还需要设置当用户点击页面其他区域时自动隐藏提示框，代码如下：

        $("#document").bind("click",function(){
        $("#MyAutoComplete").hide();
        });

好了，插件代码已经全部写好，下面我们在html页面上测试一下，页面前台调用代码：

  <script type="text/javascript">
        $(function () {
            var data = ["中国好声音", "中国移动网上营业厅", "中国银行", "中国移动", "中国好声音第三期", "中国好声音 第一期", "中国电信网上营业厅", "中国工商银行", "中国好声音第二期", "中国地图"];
            $("#textbox1").MyAutocomplete({ width: 200, data: data, callback: function (data) {
                alert(data);
            }
            });
        })
    </script>

data可以通过ajax方式从后台获取，这里为了演示就直接写在前台，执行效果如下：

选中某条记录并点击，回调函数执行，效果如下：

需要全部代码的童鞋可以留下邮箱~~