jq ui autocomplete的使用

最新推荐文章于 2021-09-18 12:09:18 发布
无缘Di爱你
最新推荐文章于 2021-09-18 12:09:18 发布
阅读量793
点赞数
分类专栏： html 文章标签： jq autocomplete js 前端
本文链接：https://blog.csdn.net/sinat_16326489/article/details/83311855
版权
html 专栏收录该内容
8 篇文章 0 订阅
订阅专栏
例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <!--<script src="//code.jquery.com/jquery-1.11.2.js"></script>-->
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
</head>
<body>
<div style="text-align: center;margin-top: 20px">
    <input id="txtSearchKey" type="text" style="width:250px; height:30px;"/>
</div>
</body>
<style>
    .autocomplete-ul {
        /*max-height: 200px;*/
        overflow-y: scroll;
    }

    .autocomplete-ul li {
        margin: 2px;
        padding: 2px 5px;
        cursor: pointer;
        display: block;
        font-size: 14px;
        line-height: 20px;
        overflow: hidden;
    }

    .autocomplete-ul li .box p, .autocomplete-ul li .box div, .autocomplete-ul li .box a {
        overflow: hidden;
        white-space: nowrap;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .autocomplete-ul li .box p {
        margin: 0;
    }

    /* firefox only */
    .autocomplete-ul li .box :not(p) {
        clear: both;
    }

    .autocomplete-ul li .box :not(p) a {
        float: left;
    }

    .autocomplete-ul li .box div:not(p):after {
        content: "...";
        float: left;
        color: #000;
    }

    .autocomplete-ul li:hover {
        background-color: rgb(195, 195, 195);
    }

    .autocomplete-ul .autocomplete_odd {
        background-color: #f6f6f6;
    }


</style>
<script>
    function autocomplete(id, param, callback) {
        //最小长度
        var minLength = 2;
        var autoFocus = false;
        //延迟 单位毫秒
        var delay = 500;
        //ul id
        var ulId = id + "Box";
        //ul 的高度
        var maxHeight = 200 + "px";
        //搜素框
        var obj = $("#" + id);
        //长度
        var width = obj.width();
        if (param) {
            // console.log(param)
            if (param.minLength) {
                minLength = param.minLength
            } else if (param.autoFocus) {
                autoFocus = param.autoFocus
            } else if (param.delay) {
                delay = param.delay;
            } else if (param.ulId) {
                ulId = param.ulId;
            } else if (param.maxHeight) {
                maxHeight = param.maxHeight + "px";
            } else {
                if (callback) {

                } else {
                    callback = param;
                }
            }
        }
        // console.log(callback)
        $.widget("ui.autocomplete", $.ui.autocomplete, {
            //渲染列表 ul
            _renderMenu: function (ul, items) {
                if (callback && callback.renderMenu) {
                    callback.renderMenu(ul, items, this)
                } else {
                    var that = this;
                    $.each(items, function (index, item) {
                        var li = that._renderItemData(ul, item);
                    });
                }
                $(ul).find("li:odd").addClass("autocomplete_odd");
                $(ul).css({"max-height": maxHeight})
            },
            //每列渲染li
            _renderItem: function (ul, item) {
                if (callback && callback.renderItem) {
                    callback.renderItem(ul, item)
                } else {
                    var li = $("<li>");
                    li.attr("title", item.title).append(item.label);
                    var html = "";
                    if (item.html) {
                        html = "<div class='box'>" + item.html + "</div>";
                    }
                    li.html(html);
                    return li.appendTo(ul);
                }
            },
            _resizeMenu: function () {
                if (callback && callback.resizeMenu) {
                    callback.resizeMenu(this.menu.element)
                } else {
                    this.menu.element.outerWidth(width);
                }
            }
        });
        $.fn.extend({
            //重写控件的id方法
            uniqueId: function () {
                return this.each(function () {
                    if (!this.id) {
                        this.id = ulId;
                    }
                });
            },
            //重写去掉控件的id方法
            removeUniqueId: function () {
                return this.each(function () {
                    if (ulId.test(this.id)) {
                        $(this).removeAttr("id");
                    }
                });
            }
        });
        obj.autocomplete({
            //搜索调用的函数
            source: function (k, fn) {
                // console.log(callback && callback.source)
                if (callback && callback.source) {
                    callback.source(k, fn);
                } else {

                }
            },
            //搜素选择回调
            select: function (event, ui) {
                // console.log(">>>>当智能提示框中任意一项被选中时发生，ui.item为选中的项。");
                // console.log(ui)
                if (callback && callback.select) {
                    callback.select(event, ui);
                } else {

                }
            },
            //在搜索完成后智能提示框显示前发生，可以在此事件中对显示项进行处理
            response: function (event, ui) {
                $("#" + ulId).show()
                // console.log(ui)
                // console.log(">>>>在搜索完成后智能提示框显示前发生，可以在此事件中对显示项进行处理");
                if (callback && callback.response) {
                    callback.response(event, ui);
                }

            },
            //如果输入域的值改变则触发该事件
            change: function (event, ui) {
                if (callback && callback.change) {
                    callback.change(event, ui);
                } else {

                }
            },
            minLength: minLength,
            autoFocus: autoFocus,
            delay: delay
        });
        obj.focus(function () {
            var ul = $("#" + ulId);
            if ($(this).val() == "") {
                ul.html();
            } else {
                ul.show()
            }
        });
        $("#" + ulId).addClass("autocomplete-ul");
    }
</script>
<script>
    var callback = {
        source: function (search, fn) {
            console.log(search)
            var data = [
                {
                    title: "anders",
                    value: "ok",
                    html: "<p>anderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonandersson</p><p>22233333</p>"
                }, {
                    title: "anders",
                    value: "ok1",
                    html: "<p>anderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonandersson</p><p>22233333</p>"
                }, {
                    title: "anders",
                    value: "ok2",
                    html: "<p>anderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonandersson</p><p>22233333</p>"
                }, {
                    title: "anders",
                    value: "ok3",
                    html: "<p>anderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonandersson</p><p>22233333</p>"
                }, {
                    title: "anders",
                    value: "ok4",
                    html: "<p>anderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonandersson</p><p>22233333</p>"
                }, {
                    title: "anders",
                    value: "ok5",
                    html: "<p>anderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonandersson</p><p>22233333</p>"
                }, {
                    title: "anders",
                    value: "ok6",
                    html: "<p>anderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonandersson</p><p>22233333</p>"
                }, {
                    title: "anders",
                    value: "ok7",
                    html: "<p>anderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonanderssonandersson</p><p>22233333</p>"
                }
            ];
            fn(data)
        }
    };
    autocomplete('txtSearchKey', callback);
</script>
</html>