@whitesev/pops 2.3.3 → 2.3.4

package/dist/index.system.js

@@ -1818,11 +1818,11 @@ System.register('pops', [], (function (exports) {
                 }
                 /**
                  * 添加className
-                 * @param element 目标元素
+                 * @param $el 目标元素
                  * @param className className属性
                  */
-                addClassName(element, className) {
-                    if (element == null) {
+                addClassName($el, className) {
+                    if ($el == null) {
                         return;
                     }
                     if (typeof className !== "string") {
@@ -1831,15 +1831,16 @@ System.register('pops', [], (function (exports) {
                     if (className.trim() === "") {
                         return;
                     }
-                    element.classList.add(className);
+                    const classNameList = className.split(" ").filter((item) => item.trim() !== "");
+                    $el.classList.add(...classNameList);
                 }
                 /**
                  * 删除className
-                 * @param element 目标元素
+                 * @param $el 目标元素
                  * @param className className属性
                  */
-                removeClassName(element, className) {
-                    if (element == null) {
+                removeClassName($el, className) {
+                    if ($el == null) {
                         return;
                     }
                     if (typeof className !== "string") {
@@ -1848,15 +1849,16 @@ System.register('pops', [], (function (exports) {
                     if (className.trim() === "") {
                         return;
                     }
-                    element.classList.remove(className);
+                    const classNameList = className.split(" ").filter((item) => item.trim() !== "");
+                    $el.classList.remove(...classNameList);
                 }
                 /**
                  * 判断元素是否包含某个className
-                 * @param element 目标元素
+                 * @param $el 目标元素
                  * @param className className属性
                  */
-                containsClassName(element, className) {
-                    if (element == null) {
+                containsClassName($el, className) {
+                    if ($el == null) {
                         return false;
                     }
                     if (typeof className !== "string") {
@@ -1865,7 +1867,7 @@ System.register('pops', [], (function (exports) {
                     if (className.trim() === "") {
                         return false;
                     }
-                    return element.classList.contains(className);
+                    return $el.classList.contains(className);
                 }
                 css(element, property, value) {
                     /**
@@ -2488,6 +2490,24 @@ System.register('pops', [], (function (exports) {
                     }
                     return useChangeColor();
                 }
+                /**
+                 * 获取移动元素的transform偏移
+                 * @param element 元素
+                 */
+                getTransform(element) {
+                    let transform_left = 0;
+                    let transform_top = 0;
+                    let elementTransform = PopsCore.globalThis.getComputedStyle(element).transform;
+                    if (elementTransform !== "none" && elementTransform != null && elementTransform !== "") {
+                        let elementTransformSplit = elementTransform.match(/\((.+)\)/)?.[1].split(",");
+                        transform_left = Math.abs(parseInt(elementTransformSplit[4]));
+                        transform_top = Math.abs(parseInt(elementTransformSplit[5]));
+                    }
+                    return {
+                        transformLeft: transform_left,
+                        transformTop: transform_top,
+                    };
+                }
             }
             const popsDOMUtils = new PopsDOMUtils();
 
@@ -3287,23 +3307,6 @@ System.register('pops', [], (function (exports) {
                     popsDOMUtils.css(options.dragElement, {
                         cursor: "move",
                     });
-                    /**
-                     * 获取移动元素的transform偏移
-                     */
-                    function getTransform(element) {
-                        let transform_left = 0;
-                        let transform_top = 0;
-                        let elementTransform = PopsCore.globalThis.getComputedStyle(element).transform;
-                        if (elementTransform !== "none" && elementTransform != null && elementTransform !== "") {
-                            let elementTransformSplit = elementTransform.match(/\((.+)\)/)?.[1].split(",");
-                            transform_left = Math.abs(parseInt(elementTransformSplit[4]));
-                            transform_top = Math.abs(parseInt(elementTransformSplit[5]));
-                        }
-                        return {
-                            transformLeft: transform_left,
-                            transformTop: transform_top,
-                        };
-                    }
                     /**
                      * 修改移动的元素的style
                      */
@@ -3345,9 +3348,8 @@ System.register('pops', [], (function (exports) {
                             };
                         }
                     }
-                    let transformInfo = getTransform(moveElement);
-                    let transformLeft = transformInfo.transformLeft;
-                    let transformTop = transformInfo.transformTop;
+                    // 获取transform偏移
+                    let transformInfo = popsDOMUtils.getTransform(moveElement);
                     let resumeMoveElementStyle = null;
                     anyTouchElement.on("pan", function (event) {
                         if (!isMove) {
@@ -3355,9 +3357,7 @@ System.register('pops', [], (function (exports) {
                             let rect = options.dragElement.getBoundingClientRect();
                             clickElementLeftOffset = event.x - rect.left;
                             clickElementTopOffset = event.y - rect.top;
-                            transformInfo = getTransform(moveElement);
-                            transformLeft = transformInfo.transformLeft;
-                            transformTop = transformInfo.transformTop;
+                            transformInfo = popsDOMUtils.getTransform(moveElement);
                             //if (event.nativeEvent.offsetX) {
                             //  clickElementLeftOffset = parseInt(event.nativeEvent.offsetX);
                             //} else {
@@ -3371,9 +3371,9 @@ System.register('pops', [], (function (exports) {
                             resumeMoveElementStyle = changeMoveElementStyle(moveElement);
                         }
                         /** 当前移动的left偏移 */
-                        let currentMoveLeftOffset = event.x - clickElementLeftOffset + transformLeft;
+                        let currentMoveLeftOffset = event.x - clickElementLeftOffset + transformInfo.transformLeft;
                         /** 当前移动的top偏移 */
-                        let currentMoveTopOffset = event.y - clickElementTopOffset + transformTop;
+                        let currentMoveTopOffset = event.y - clickElementTopOffset + transformInfo.transformTop;
                         /* 拖拽移动 */
                         if (event.phase === "move") {
                             if (options.limit) {
@@ -3381,12 +3381,12 @@ System.register('pops', [], (function (exports) {
                                 /* left偏移最大值 */
                                 let maxLeftOffset = getContainerWidthOrHeight(options.container).width -
                                     popsDOMUtils.width(moveElement) +
-                                    transformLeft;
+                                    transformInfo.transformLeft;
                                 let { left: minLeftOffset, top: minTopOffset } = getContainerTopOrLeft(options.container);
                                 /* top偏移的最大值 */
                                 let maxTopOffset = getContainerWidthOrHeight(options.container).height -
                                     popsDOMUtils.height(moveElement) +
-                                    transformTop;
+                                    transformInfo.transformTop;
                                 if (currentMoveLeftOffset > maxLeftOffset) {
                                     /* 不允许超过容器的最大宽度 */
                                     currentMoveLeftOffset = maxLeftOffset;
@@ -3395,9 +3395,10 @@ System.register('pops', [], (function (exports) {
                                     /* 不允许超过容器的最大高度 */
                                     currentMoveTopOffset = maxTopOffset;
                                 }
-                                if (currentMoveLeftOffset - options.extraDistance * 2 < minLeftOffset + transformLeft) {
+                                if (currentMoveLeftOffset - options.extraDistance * 2 <
+                                    minLeftOffset + transformInfo.transformLeft) {
                                     /* 不允许left偏移小于容器最小值 */
-                                    currentMoveLeftOffset = minLeftOffset + transformLeft;
+                                    currentMoveLeftOffset = minLeftOffset + transformInfo.transformLeft;
                                     /* 最左边 +额外距离 */
                                     currentMoveLeftOffset += options.extraDistance;
                                 }
@@ -3405,9 +3406,9 @@ System.register('pops', [], (function (exports) {
                                     /* 最右边 -额外距离 */
                                     currentMoveLeftOffset -= options.extraDistance;
                                 }
-                                if (currentMoveTopOffset - options.extraDistance * 2 < minTopOffset + transformTop) {
+                                if (currentMoveTopOffset - options.extraDistance * 2 < minTopOffset + transformInfo.transformTop) {
                                     /* 不允许top偏移小于容器最小值 */
-                                    currentMoveTopOffset = minTopOffset + transformTop;
+                                    currentMoveTopOffset = minTopOffset + transformInfo.transformTop;
                                     /* 最上面 +额外距离 */
                                     currentMoveTopOffset += options.extraDistance;
                                 }
@@ -10833,33 +10834,34 @@ System.register('pops', [], (function (exports) {
             };
 
             const searchSuggestionConfig = () => {
+                const data = [];
+                for (let index = 0; index < 10; index++) {
+                    data.push({
+                        value: `测试${index}`,
+                        text: `测试${index}-html`,
+                    });
+                }
                 return {
                     // @ts-ignore
                     target: null,
                     // @ts-ignore
                     inputTarget: null,
                     selfDocument: document,
-                    data: [
-                        {
-                            value: "数据1",
-                            text: "数据1-html",
-                        },
-                        {
-                            value: "数据2",
-                            text: "数据2-html",
-                        },
-                    ],
+                    data: data,
                     deleteIcon: {
                         enable: true,
-                        callback(event, liElement, data) {
-                            console.log("删除当前项", [event, liElement, data]);
+                        callback(event, liElement, dataItem) {
+                            console.log("删除当前项", [event, liElement, dataItem]);
+                            data.splice(data.indexOf(dataItem), 1);
                             liElement.remove();
                         },
                     },
                     useShadowRoot: true,
                     className: "",
                     isAbsolute: true,
-                    isAnimation: true,
+                    isAnimation: false,
+                    useFoldAnimation: true,
+                    useArrow: false,
                     width: "250px",
                     maxHeight: "300px",
                     followTargetWidth: true,
@@ -10874,9 +10876,9 @@ System.register('pops', [], (function (exports) {
                     getItemHTML(item) {
                         return item.text ?? item;
                     },
-                    async getData(value) {
+                    async getData(value, data) {
                         console.log("当前输入框的值是：", value);
-                        return [];
+                        return data.filter((it) => it.value.includes(value));
                     },
                     itemClickCallBack(event, liElement, data) {
                         console.log("item项的点击回调", [event, liElement, data]);
@@ -10948,74 +10950,168 @@ System.register('pops', [], (function (exports) {
                             /** 是否结果为空 */
                             isEmpty: true,
                         },
+                        /** 初始化元素变量 */
+                        initEl() {
+                            this.$el.root = SearchSuggestion.createSearchSelectElement();
+                            this.$el.$dynamicCSS = this.$el.root.querySelector("style[data-dynamic]");
+                            this.$el.$hintULContainer = SearchSuggestion.$el.root.querySelector("ul");
+                        },
                         /**
                          * 初始化
                          */
                         init(parentElement = document.body || document.documentElement) {
                             this.initEl();
-                            SearchSuggestion.update(typeof config.data === "function" ? config.data() : config.data);
-                            SearchSuggestion.updateDynamicCSS();
-                            SearchSuggestion.changeHintULElementWidth();
-                            SearchSuggestion.changeHintULElementPosition();
+                            SearchSuggestion.update(this.getData());
+                            SearchSuggestion.updateStyleSheet();
                             SearchSuggestion.hide();
-                            if (config.isAnimation) {
-                                SearchSuggestion.$el.root.classList.add(`pops-${popsType}-animation`);
-                            }
                             $shadowRoot.appendChild(SearchSuggestion.$el.root);
                             parentElement.appendChild($shadowContainer);
                         },
-                        /** 初始化元素变量 */
-                        initEl() {
-                            this.$el.root = SearchSuggestion.getSearchSelectElement();
-                            this.$el.$dynamicCSS = this.$el.root.querySelector("style[data-dynamic]");
-                            this.$el.$hintULContainer = SearchSuggestion.$el.root.querySelector("ul");
+                        /**
+                         * 获取数据
+                         */
+                        getData() {
+                            return typeof config.data === "function" ? config.data() : config.data;
                         },
                         /**
                          * 获取显示出搜索建议框的html
                          */
-                        getSearchSelectElement() {
-                            let element = popsDOMUtils.createElement("div", {
+                        createSearchSelectElement() {
+                            let $el = popsDOMUtils.createElement("div", {
                                 className: `pops pops-${popsType}-search-suggestion`,
                                 innerHTML: /*html*/ `
+						<style>
+							.pops-${popsType}-animation{
+								-moz-animation: searchSelectFalIn 0.5s 1 linear;
+								-webkit-animation: searchSelectFalIn 0.5s 1 linear;
+								-o-animation: searchSelectFalIn 0.5s 1 linear;
+								-ms-animation: searchSelectFalIn 0.5s 1 linear;
+							}
+						</style>
+						<style>
+							.pops-${popsType}-search-suggestion-arrow{
+								--suggestion-arrow-box-shadow-left-color: rgba(0, 0, 0, 0.24);
+								--suggestion-arrow-box-shadow-right-color: rgba(0, 0, 0, 0.12);
+								--suggestion-arrow--after-color: rgb(78, 78, 78);
+								--suggestion-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));
+								--suggestion-arrow--after-width: 10px;
+								--suggestion-arrow--after-height: 10px;
+							}
+							.pops-${popsType}-search-suggestion-arrow{
+								position: absolute;
+								top: 100%;
+								left: 50%;
+								overflow: hidden;
+								width: 100%;
+								height: 12.5px;
+								transform: translateX(-50%);
+							}
+							.pops-${popsType}-search-suggestion-arrow::after{
+								position: absolute;
+								top: 0;
+								left: 50%;
+								width: var(--suggestion-arrow--after-width);
+								height: var(--suggestion-arrow--after-height);
+								background: var(--suggestion-arrow--after-bg-color);
+								color: var(--suggestion-arrow--after-color);
+								box-shadow:
+									0 1px 7px var(--suggestion-arrow-box-shadow-left-color),
+									0 1px 7px var(--suggestion-arrow-box-shadow-right-color);
+								content: "";
+								transform: translateX(-50%) translateY(-50%) rotate(45deg);
+							}
+							.pops-${popsType}-search-suggestion[data-popper-placement^="top"] .pops-${popsType}-search-suggestion-arrow{
+								position: absolute;
+								top: 100%;
+								left: 50%;
+								overflow: hidden;
+								width: 100%;
+								height: 12.5px;
+								transform: translateX(-50%);
+							}
+							.pops-${popsType}-search-suggestion[data-popper-placement^="top"] .pops-${popsType}-search-suggestion-arrow::after{
+								position: absolute;
+								top: 0;
+								left: 50%;
+								width: var(--suggestion-arrow--after-width);
+								height: var(--suggestion-arrow--after-height);
+								background: var(--suggestion-arrow--after-bg-color);
+								box-shadow:
+									0 1px 7px var(--suggestion-arrow-box-shadow-left-color),
+									0 1px 7px var(--suggestion-arrow-box-shadow-right-color);
+								content: "";
+								transform: translateX(-50%) translateY(-50%) rotate(45deg);
+							}
+							.pops-${popsType}-search-suggestion[data-popper-placement^="bottom"] .pops-${popsType}-search-suggestion-arrow{
+								top: -12.5px;
+								left: 50%;
+								transform: translateX(-50%);
+							}
+							.pops-${popsType}-search-suggestion[data-popper-placement^="bottom"] .pops-${popsType}-search-suggestion-arrow::after{
+								position: absolute;
+								top: 100%;
+								left: 50%;
+								content: "";
+							}
+						</style>
 						<style data-dynamic="true">
 							${this.getDynamicCSS()}
 						</style>
-						<ul class="pops-${popsType}-search-suggestion-hint">${config.toSearhNotResultHTML}</ul>
+						<style>
+							.el-zoom-in-top-animation{
+								--el-transition-md-fade: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
+									opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+								transition: var(--el-transition-md-fade);
+								transform-origin: center top;
+							}
+							.el-zoom-in-top-animation[data-popper-placement^="top"] {
+								transform-origin: center bottom;
+							}
+							.el-zoom-in-top-animation-hide{
+								opacity: 0;
+								transform: scaleY(0);
+							}
+							.el-zoom-in-top-animation-show{
+								opacity: 1;
+								transform: scaleY(1);
+							}
+						</style>
+						<ul class="pops-${popsType}-search-suggestion-hint ${PopsCommonCSSClassName.userSelectNone}">${config.toSearhNotResultHTML}</ul>
+						${config.useArrow ? /*html*/ `<div class="pops-${popsType}-search-suggestion-arrow"></div>` : ""}
          				 `,
                             }, {
                                 "data-guid": guid,
                                 "type-value": popsType,
                             });
                             if (config.className !== "" && config.className != null) {
-                                popsDOMUtils.addClassName(element, config.className);
+                                popsDOMUtils.addClassName($el, config.className);
+                            }
+                            if (config.isAnimation) {
+                                popsDOMUtils.addClassName($el, `pops-${popsType}-animation`);
+                            }
+                            if (config.useFoldAnimation) {
+                                popsDOMUtils.addClassName($el, "el-zoom-in-top-animation");
                             }
-                            return element;
+                            return $el;
                         },
                         /** 动态获取CSS */
                         getDynamicCSS() {
                             return /*css*/ `
-				.pops-${popsType}-animation{
-					-moz-animation: searchSelectFalIn 0.5s 1 linear;
-					-webkit-animation: searchSelectFalIn 0.5s 1 linear;
-					-o-animation: searchSelectFalIn 0.5s 1 linear;
-					-ms-animation: searchSelectFalIn 0.5s 1 linear;
-				}
 				.pops-${popsType}-search-suggestion{
 					--search-suggestion-bg-color: #ffffff;
 					--search-suggestion-box-shadow-color: rgb(0 0 0 / 20%);
 					--search-suggestion-item-color: #515a6e;
 					--search-suggestion-item-none-color: #8e8e8e;
-					--search-suggestion-item-hover-bg-color: rgba(0, 0, 0, .1);
+					--search-suggestion-item-is-hover-bg-color: #f5f7fa;
+					--search-suggestion-item-is-select-bg-color: #409eff;
 				}
 				.pops-${popsType}-search-suggestion{
 					border: initial;
 					overflow: initial;
-				}
-				ul.pops-${popsType}-search-suggestion-hint{
 					position: ${config.isAbsolute ? "absolute" : "fixed"};
 					z-index: ${PopsHandler.handleZIndex(config.zIndex)};
-					width: 0;
-					left: 0;
+				}
+				ul.pops-${popsType}-search-suggestion-hint{
 					max-height: ${config.maxHeight};
 					overflow-x: hidden;
 					overflow-y: auto;
@@ -11026,11 +11122,11 @@ System.register('pops', [], (function (exports) {
 					box-shadow: 0 1px 6px var(--search-suggestion-box-shadow-color);
 				}
 				/* 建议框在上面时 */
-				ul.pops-${popsType}-search-suggestion-hint[data-top-reverse]{
+				.pops-${popsType}-search-suggestion[data-top-reverse] ul.pops-${popsType}-search-suggestion-hint{
 					display: flex;
 					flex-direction: column-reverse;
 				}
-				ul.pops-${popsType}-search-suggestion-hint[data-top-reverse] li{
+				.pops-${popsType}-search-suggestion[data-top-reverse] ul.pops-${popsType}-search-suggestion-hint li{
 					flex-shrink: 0;
 				}
 				ul.pops-${popsType}-search-suggestion-hint li{
@@ -11052,14 +11148,13 @@ System.register('pops', [], (function (exports) {
 					color: var(--search-suggestion-item-none-color);
 				}
 				ul.pops-${popsType}-search-suggestion-hint li:not([data-none]):hover{
-					background-color: var(--search-suggestion-item-hover-bg-color);
+					background-color: var(--search-suggestion-item-is-hover-bg-color);
 				}
-
 				@media (prefers-color-scheme: dark){
 					.pops-${popsType}-search-suggestion{
 						--search-suggestion-bg-color: #1d1e1f;
 						--search-suggestion-item-color: #cfd3d4;
-						--search-suggestion-item-hover-bg-color: rgba(175, 175, 175, .1);
+						--search-suggestion-item-is-hover-bg-color: rgba(175, 175, 175, .1);
 					}
 				}
 				`;
@@ -11069,7 +11164,7 @@ System.register('pops', [], (function (exports) {
                          * @param data 当前项的值
                          * @param index 当前项的下标
                          */
-                        getSearchItemLiElement(data, index) {
+                        createSearchItemLiElement(data, index) {
                             let $li = popsDOMUtils.createElement("li", {
                                 className: `pops-${popsType}-search-suggestion-hint-item`,
                                 "data-index": index,
@@ -11089,25 +11184,28 @@ System.register('pops', [], (function (exports) {
                         },
                         /**
                          * 设置搜索建议框每一项的点击事件
-                         * @param liElement
+                         * @param $searchItem
                          */
-                        setSearchItemClickEvent(liElement) {
-                            popsDOMUtils.on(liElement, "click", void 0, (event) => {
+                        setSearchItemClickEvent($searchItem) {
+                            popsDOMUtils.on($searchItem, "click", (event) => {
                                 popsDOMUtils.preventEvent(event);
                                 let $click = event.target;
-                                if ($click.closest(`.pops-${popsType}-delete-icon`)) {
-                                    /* 点击的是删除按钮 */
+                                let dataValue = Reflect.get($searchItem, "data-value");
+                                let isDelete = Boolean($click.closest(`.pops-${popsType}-delete-icon`));
+                                if (isDelete) {
+                                    // 删除
                                     if (typeof config.deleteIcon.callback === "function") {
-                                        config.deleteIcon.callback(event, liElement, liElement["data-value"]);
+                                        config.deleteIcon.callback(event, $searchItem, dataValue);
                                     }
                                     if (!this.$el.$hintULContainer.children.length) {
                                         /* 全删完了 */
                                         this.clear();
                                     }
+                                    SearchSuggestion.updateStyleSheet();
                                 }
                                 else {
-                                    /* 点击项主体 */
-                                    config.itemClickCallBack(event, liElement, liElement["data-value"]);
+                                    // 点击选择项
+                                    config.itemClickCallBack(event, $searchItem, dataValue);
                                 }
                             }, {
                                 capture: true,
@@ -11147,8 +11245,9 @@ System.register('pops', [], (function (exports) {
                             config.inputTarget.setAttribute("autocomplete", "off");
                             /* 内容改变事件 */
                             popsDOMUtils.on(config.inputTarget, "input", void 0, async (event) => {
-                                let getListResult = await config.getData(event.target.value);
+                                let getListResult = await config.getData(config.inputTarget.value, this.getData());
                                 SearchSuggestion.update(getListResult);
+                                SearchSuggestion.updateStyleSheet();
                             }, option);
                         },
                         /**
@@ -11163,12 +11262,10 @@ System.register('pops', [], (function (exports) {
                          * 显示搜索建议框的事件
                          */
                         showEvent() {
-                            SearchSuggestion.updateDynamicCSS();
-                            SearchSuggestion.changeHintULElementWidth();
-                            SearchSuggestion.changeHintULElementPosition();
+                            SearchSuggestion.updateStyleSheet();
                             if (config.toHideWithNotResult) {
                                 if (SearchSuggestion.$data.isEmpty) {
-                                    SearchSuggestion.hide();
+                                    SearchSuggestion.hide(true);
                                 }
                                 else {
                                     SearchSuggestion.show();
@@ -11227,7 +11324,7 @@ System.register('pops', [], (function (exports) {
                                     /* 点击在目标input内 */
                                     return;
                                 }
-                                SearchSuggestion.hide();
+                                SearchSuggestion.hide(true);
                             }
                         },
                         /**
@@ -11352,29 +11449,39 @@ System.register('pops', [], (function (exports) {
                                 else {
                                     // 在下面
                                     position = "bottom";
-                                    SearchSuggestion.$el.$hintULContainer.removeAttribute("data-top");
                                 }
                             }
                             if (position === "top") {
+                                // 在上面
                                 if (config.positionTopToReverse) {
-                                    SearchSuggestion.$el.$hintULContainer.setAttribute("data-top-reverse", "true");
+                                    // 自动翻转
+                                    SearchSuggestion.$el.root.setAttribute("data-top-reverse", "true");
                                 }
-                                // 在上面
-                                SearchSuggestion.$el.$hintULContainer.style.top = "";
-                                SearchSuggestion.$el.$hintULContainer.style.bottom =
-                                    documentHeight - targetRect.top + config.topDistance + "px";
+                                if (config.useFoldAnimation) {
+                                    // 翻转折叠
+                                    SearchSuggestion.$el.root.setAttribute("data-popper-placement", "top");
+                                }
+                                let bottom = documentHeight - targetRect.top + config.topDistance;
+                                SearchSuggestion.$el.root.style.top = "";
+                                SearchSuggestion.$el.root.style.bottom = bottom + "px";
                             }
                             else if (position === "bottom") {
                                 // 在下面
-                                SearchSuggestion.$el.$hintULContainer.removeAttribute("data-top-reverse");
-                                SearchSuggestion.$el.$hintULContainer.style.bottom = "";
-                                SearchSuggestion.$el.$hintULContainer.style.top =
-                                    targetRect.height + targetRect.top + config.topDistance + "px";
+                                if (config.useFoldAnimation) {
+                                    SearchSuggestion.$el.root.setAttribute("data-popper-placement", "bottom-center");
+                                }
+                                let top = targetRect.height + targetRect.top + config.topDistance;
+                                SearchSuggestion.$el.root.removeAttribute("data-top-reverse");
+                                SearchSuggestion.$el.root.style.bottom = "";
+                                SearchSuggestion.$el.root.style.top = top + "px";
                             }
+                            let left = targetRect.left;
                             let hintUIWidth = popsDOMUtils.width(SearchSuggestion.$el.$hintULContainer);
-                            SearchSuggestion.$el.$hintULContainer.style.left =
-                                (targetRect.left + hintUIWidth > documentWidth ? documentWidth - hintUIWidth : targetRect.left) +
-                                    "px";
+                            if (hintUIWidth > documentWidth) {
+                                // 超出宽度
+                                left = left + documentWidth - hintUIWidth;
+                            }
+                            SearchSuggestion.$el.root.style.left = left + "px";
                         },
                         /**
                          * 更新搜索建议框的width
@@ -11396,6 +11503,17 @@ System.register('pops', [], (function (exports) {
                             let cssText = this.getDynamicCSS();
                             PopsSafeUtils.setSafeHTML(this.$el.$dynamicCSS, cssText);
                         },
+                        /**
+                         * 数据项的数量改变时调用
+                         */
+                        updateStyleSheet() {
+                            // 更新z-index
+                            SearchSuggestion.updateDynamicCSS();
+                            // 更新宽度
+                            SearchSuggestion.changeHintULElementWidth();
+                            // 更新位置
+                            SearchSuggestion.changeHintULElementPosition();
+                        },
                         /**
                          * 更新页面显示的搜索结果
                          * @param data
@@ -11414,7 +11532,7 @@ System.register('pops', [], (function (exports) {
                                 SearchSuggestion.clearAllSearchItemLi();
                                 /* 添加进ul中 */
                                 config.data.forEach((item, index) => {
-                                    let itemElement = SearchSuggestion.getSearchItemLiElement(item, index);
+                                    let itemElement = SearchSuggestion.createSearchItemLiElement(item, index);
                                     SearchSuggestion.setSearchItemClickEvent(itemElement);
                                     SearchSuggestion.setSearchItemSelectEvent(itemElement);
                                     SearchSuggestion.$el.$hintULContainer.appendChild(itemElement);
@@ -11438,15 +11556,32 @@ System.register('pops', [], (function (exports) {
                         },
                         /**
                          * 隐藏搜索建议框
+                         * @param useAnimationToHide 是否使用动画隐藏
                          */
-                        hide() {
-                            this.$el.root.style.display = "none";
+                        hide(useAnimationToHide = false) {
+                            if (config.useFoldAnimation) {
+                                if (!useAnimationToHide) {
+                                    // 去掉动画
+                                    popsDOMUtils.removeClassName(this.$el.root, "el-zoom-in-top-animation");
+                                }
+                                popsDOMUtils.addClassName(this.$el.root, "el-zoom-in-top-animation");
+                                popsDOMUtils.addClassName(this.$el.root, "el-zoom-in-top-animation-hide");
+                                popsDOMUtils.removeClassName(this.$el.root, "el-zoom-in-top-animation-show");
+                            }
+                            else {
+                                this.$el.root.style.display = "none";
+                            }
                         },
                         /**
                          * 显示搜索建议框
                          */
                         show() {
                             this.$el.root.style.display = "";
+                            if (config.useFoldAnimation) {
+                                popsDOMUtils.addClassName(this.$el.root, "el-zoom-in-top-animation");
+                                popsDOMUtils.removeClassName(this.$el.root, "el-zoom-in-top-animation-hide");
+                                popsDOMUtils.addClassName(this.$el.root, "el-zoom-in-top-animation-show");
+                            }
                         },
                     };
                     return SearchSuggestion;