仿搜索引擎自动补全jquery插件源码

作者：管理员

发布时间：2013/7/27 14:15:47

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=298

今天无意中发现了一位网友自己写了一个搜索引擎自动补全Jquery插件，现在把源码贴出来供大家学习参与。

(function ($) {
    $.fn.autocomplete = function (option) {
        this.defaults = {
            url: "",
            searchData: "",//输入的查询字符串
            data: "",//自定义传入参数
            textField: "",//下拉框显示的文本
            valueField: ""//文本对应的值
        };
        this.ul = $("<ul class='autocomplete-list' id='xxx'></ul>").insertAfter($(this));
        this.option = $.extend({}, this.defaults, option);
        $(".autocomplete-list").hide();
        var $txt = $(this);
        this.keyup = function () {
            var val = $(this).val();
            var inputList = val.split(',');
            if (inputList[inputList.length - 1] === "") {
                return;
            }
            val = inputList[inputList.length - 1];
            var textField = this.option.textField;
            var valueField = this.option.valueField;
            var ul = this.ul;
            $.getJSON(this.option.url + '?' + this.option.searchData + '=' + val, this.option.data, function (json) {
                $(ul).empty().hide();
                if (json.length > 0) {
                    for (var i = 0; i < json.length; i++) {
                        var param = decodeURIComponent($.param(json[i]));
                        var parList = param.split("&");
                        var $li = $("<li>").appendTo(ul);

                        for (var j = 0; j < parList.length; j++) {
                            var key = parList[j].split("=")[0];
                            var value = parList[j].split("=")[1];
                            if (key === textField) {
                                $li.html(value);
                            } else if (key === valueField) {
                                if (value) {
                                    $li.attr("value", value);
                                }
                            }
                        }



                        $li.hover(function () {
                            $txt.blur();
                            $(this).addClass("highlight");
                        }, function () {
                            $(this).removeClass("highlight");
                        });

                        $li.click(function (e) {
                            e.stopPropagation();
                            var text = $txt.val();
                            if (text.lastIndexOf(',') > 0) {
                                text = text.substring(0, text.lastIndexOf(',') + 1);
                            } else {
                                text = "";
                            }
                            var textValue = text + $(this).text() + ",";
                            $txt.val(textValue);
                            $(".autocomplete-list").empty().hide();
                            $txt.focus();
                        });
                        //                        $(".autocomplete-list").append($li);
                    }
                    $(".autocomplete-list").show();
                }
            });
        };
        $txt.keyup($.proxy(this.keyup, this));


        $txt.keydown(function (e) {
            if (e.which == 40 || e.which == 38) { // 按Up\Down键
                $(this).blur();
            }
        });

        // 文本框获得焦点时重新刷新数据
        $txt.click(function (e) {
            e.stopPropagation(); // 阻止事件冒泡
            $(this).keyup();
        });

        $txt.focus(function () {
            $(this).keyup();
        });

        $(".autocomplete-list").mouseout(function () {
            $(".autocomplete-list li").removeClass("highlight");
        });

        // 鼠标点击ul列表以外的地方，隐藏列表
        $(document).click(function (e) {
            $(".autocomplete-list").empty().hide();
        });

        $(document).keydown(function (e) {
            // 如果是按上下键或回车键，则判断高亮行的索引
            if (e.which == 38 || e.which == 40 || e.which == 13) {
                var index = -1;
                var count = $(".autocomplete-list li").length;
                $(".autocomplete-list li").each(function () {
                    if ($(this).hasClass("highlight")) {
                        index = $(this).index();
                        return false;
                    }
                });
                // Enter
                if (e.which == 13) {
                    if (index > -1) {
                        var text = $txt.val();
                        if (text.lastIndexOf(',') > 0) {
                            text = text.substring(0, text.lastIndexOf(',') + 1);
                        } else {
                            text = "";
                        }
                        var highText = $(".highlight").text();
                        var textValue = text + highText + ",";
                        $txt.val(textValue);
                        $(".autocomplete-list").empty().hide();
                        $txt.focus();
                    }
                } else if (e.which == 40) { // Down
                    if (index < count - 1) {
                        $(".autocomplete-list li").eq(index + 1).addClass("highlight").prev().removeClass("highlight");
                        //                        $txt.val($(".autocomplete-list li").eq(index + 1).text());
                    }
                } else { // Up
                    if (index == -1) {
                        index = count;
                    }
                    if (index > 0) {
                        $(".autocomplete-list li").eq(index - 1).addClass("highlight").next().removeClass("highlight");
                        //                        $txt.val($(".autocomplete-list li").eq(index - 1).text());
                    }
                }
            }
        });
    }
})(jQuery)

关键字：搜索引擎 自动补全 autocomplete 原创作品 下拉菜单 键盘控制