@whitesev/pops 2.3.3 → 2.3.5

package/dist/index.umd.js

@@ -1819,11 +1819,11 @@
         }
         /**
          * 添加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") {
@@ -1832,15 +1832,16 @@
             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") {
@@ -1849,15 +1850,16 @@
             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") {
@@ -1866,7 +1868,7 @@
             if (className.trim() === "") {
                 return false;
             }
-            return element.classList.contains(className);
+            return $el.classList.contains(className);
         }
         css(element, property, value) {
             /**
@@ -2489,6 +2491,24 @@
             }
             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();
 
@@ -3288,23 +3308,6 @@
             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
              */
@@ -3346,9 +3349,8 @@
                     };
                 }
             }
-            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) {
@@ -3356,9 +3358,7 @@
                     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 {
@@ -3372,9 +3372,9 @@
                     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) {
@@ -3382,12 +3382,12 @@
                         /* 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;
@@ -3396,9 +3396,10 @@
                             /* 不允许超过容器的最大高度 */
                             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;
                         }
@@ -3406,9 +3407,9 @@
                             /* 最右边 -额外距离 */
                             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;
                         }
@@ -10747,28 +10748,42 @@
                             popsDOMUtils.addClassName(menuLiElement, `pops-${popsType}-item`);
                         }
                         /* 鼠标|触摸 移入事件 */
-                        function liElementHoverEvent() {
+                        // 在移动端会先触发touchstart再然后mouseenter
+                        let isTriggerTouchEvent = false;
+                        /**
+                         * 鼠标|触摸 移入事件
+                         */
+                        function liElementHoverEvent(event) {
+                            if (event.type === "touchstart") {
+                                isTriggerTouchEvent = true;
+                            }
+                            if (isTriggerTouchEvent && event.type === "mouseenter") {
+                                return;
+                            }
                             Array.from(menuULElement.children).forEach((liElement) => {
                                 popsDOMUtils.removeClassName(liElement, `pops-${popsType}-is-visited`);
-                                if (!liElement.__menuData__) {
+                                let li_menuData = Reflect.get(liElement, "__menuData__");
+                                if (!li_menuData) {
                                     return;
                                 }
                                 function removeElement(element) {
-                                    element.querySelectorAll("ul li").forEach((ele) => {
-                                        if (ele?.__menuData__?.child) {
-                                            removeElement(ele.__menuData__.child);
+                                    element.querySelectorAll("ul li").forEach(($ele) => {
+                                        let menuData = Reflect.get($ele, "__menuData__");
+                                        if (menuData?.child) {
+                                            removeElement(menuData.child);
                                         }
                                     });
                                     element.remove();
                                 }
                                 /* 遍历根元素的上的__menuData__.child，判断 */
-                                removeElement(liElement.__menuData__.child);
+                                removeElement(li_menuData.child);
                             });
                             /* 清理根元素上的children不存在于页面中的元素 */
-                            for (let index = 0; index < rootElement.__menuData__.child.length; index++) {
-                                let element = rootElement.__menuData__.child[index];
+                            let root_menuData = Reflect.get(rootElement, "__menuData__");
+                            for (let index = 0; index < root_menuData.child.length; index++) {
+                                let element = root_menuData.child[index];
                                 if (!$shadowRoot.contains(element)) {
-                                    rootElement.__menuData__.child.splice(index, 1);
+                                    root_menuData.child.splice(index, 1);
                                     index--;
                                 }
                             }
@@ -10781,14 +10796,13 @@
                                 clientX: rect.left + popsDOMUtils.outerWidth(menuLiElement),
                                 clientY: rect.top,
                             }, item.item, rootElement, menuLiElement, menuListenerRootNode);
-                            menuLiElement.__menuData__ = {
+                            Reflect.set(menuLiElement, "__menuData__", {
                                 child: childMenu,
-                            };
+                            });
                         }
                         /**
                          * 点击事件
                          * @param clickEvent
-                         * @returns
                          */
                         async function liElementClickEvent(clickEvent) {
                             if (typeof item.callback === "function") {
@@ -10811,9 +10825,9 @@
                             });
                             PopsContextMenu.closeAllMenu(rootElement);
                         }
-                        popsDOMUtils.on(menuLiElement, "mouseenter touchstart", void 0, liElementHoverEvent);
+                        popsDOMUtils.on(menuLiElement, "mouseenter touchstart", liElementHoverEvent);
                         /* 项-点击事件 */
-                        popsDOMUtils.on(menuLiElement, "click", void 0, liElementClickEvent);
+                        popsDOMUtils.on(menuLiElement, "click", liElementClickEvent);
                         menuULElement.appendChild(menuLiElement);
                     });
                 },
@@ -10834,33 +10848,34 @@
     };
 
     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,
@@ -10875,9 +10890,9 @@
             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]);
@@ -10949,74 +10964,168 @@
                     /** 是否结果为空 */
                     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;
@@ -11027,11 +11136,11 @@
 					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{
@@ -11053,14 +11162,13 @@
 					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);
 					}
 				}
 				`;
@@ -11070,7 +11178,7 @@
                  * @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,
@@ -11090,25 +11198,28 @@
                 },
                 /**
                  * 设置搜索建议框每一项的点击事件
-                 * @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,
@@ -11148,8 +11259,9 @@
                     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);
                 },
                 /**
@@ -11164,12 +11276,10 @@
                  * 显示搜索建议框的事件
                  */
                 showEvent() {
-                    SearchSuggestion.updateDynamicCSS();
-                    SearchSuggestion.changeHintULElementWidth();
-                    SearchSuggestion.changeHintULElementPosition();
+                    SearchSuggestion.updateStyleSheet();
                     if (config.toHideWithNotResult) {
                         if (SearchSuggestion.$data.isEmpty) {
-                            SearchSuggestion.hide();
+                            SearchSuggestion.hide(true);
                         }
                         else {
                             SearchSuggestion.show();
@@ -11228,7 +11338,7 @@
                             /* 点击在目标input内 */
                             return;
                         }
-                        SearchSuggestion.hide();
+                        SearchSuggestion.hide(true);
                     }
                 },
                 /**
@@ -11353,29 +11463,39 @@
                         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
@@ -11397,6 +11517,17 @@
                     let cssText = this.getDynamicCSS();
                     PopsSafeUtils.setSafeHTML(this.$el.$dynamicCSS, cssText);
                 },
+                /**
+                 * 数据项的数量改变时调用
+                 */
+                updateStyleSheet() {
+                    // 更新z-index
+                    SearchSuggestion.updateDynamicCSS();
+                    // 更新宽度
+                    SearchSuggestion.changeHintULElementWidth();
+                    // 更新位置
+                    SearchSuggestion.changeHintULElementPosition();
+                },
                 /**
                  * 更新页面显示的搜索结果
                  * @param data
@@ -11415,7 +11546,7 @@
                         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);
@@ -11439,15 +11570,32 @@
                 },
                 /**
                  * 隐藏搜索建议框
+                 * @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;