@whitesev/pops 2.3.3 → 2.3.5

package/dist/index.esm.js

@@ -1813,11 +1813,11 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
     }
     /**
      * 添加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") {
@@ -1826,15 +1826,16 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
         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") {
@@ -1843,15 +1844,16 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
         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") {
@@ -1860,7 +1862,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
         if (className.trim() === "") {
             return false;
         }
-        return element.classList.contains(className);
+        return $el.classList.contains(className);
     }
     css(element, property, value) {
         /**
@@ -2483,6 +2485,24 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
         }
         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();
 
@@ -3282,23 +3302,6 @@ const PopsInstanceUtils = {
         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
          */
@@ -3340,9 +3343,8 @@ const PopsInstanceUtils = {
                 };
             }
         }
-        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) {
@@ -3350,9 +3352,7 @@ const PopsInstanceUtils = {
                 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 {
@@ -3366,9 +3366,9 @@ const PopsInstanceUtils = {
                 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) {
@@ -3376,12 +3376,12 @@ const PopsInstanceUtils = {
                     /* 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;
@@ -3390,9 +3390,10 @@ const PopsInstanceUtils = {
                         /* 不允许超过容器的最大高度 */
                         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;
                     }
@@ -3400,9 +3401,9 @@ const PopsInstanceUtils = {
                         /* 最右边 -额外距离 */
                         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;
                     }
@@ -10741,28 +10742,42 @@ const PopsRightClickMenu = {
                         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--;
                             }
                         }
@@ -10775,14 +10790,13 @@ const PopsRightClickMenu = {
                             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") {
@@ -10805,9 +10819,9 @@ const PopsRightClickMenu = {
                         });
                         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);
                 });
             },
@@ -10828,33 +10842,34 @@ const PopsRightClickMenu = {
 };
 
 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,
@@ -10869,9 +10884,9 @@ const searchSuggestionConfig = () => {
         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]);
@@ -10943,74 +10958,168 @@ const PopsSearchSuggestion = {
                 /** 是否结果为空 */
                 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;
@@ -11021,11 +11130,11 @@ const PopsSearchSuggestion = {
 					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{
@@ -11047,14 +11156,13 @@ const PopsSearchSuggestion = {
 					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);
 					}
 				}
 				`;
@@ -11064,7 +11172,7 @@ const PopsSearchSuggestion = {
              * @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,
@@ -11084,25 +11192,28 @@ const PopsSearchSuggestion = {
             },
             /**
              * 设置搜索建议框每一项的点击事件
-             * @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,
@@ -11142,8 +11253,9 @@ const PopsSearchSuggestion = {
                 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);
             },
             /**
@@ -11158,12 +11270,10 @@ const PopsSearchSuggestion = {
              * 显示搜索建议框的事件
              */
             showEvent() {
-                SearchSuggestion.updateDynamicCSS();
-                SearchSuggestion.changeHintULElementWidth();
-                SearchSuggestion.changeHintULElementPosition();
+                SearchSuggestion.updateStyleSheet();
                 if (config.toHideWithNotResult) {
                     if (SearchSuggestion.$data.isEmpty) {
-                        SearchSuggestion.hide();
+                        SearchSuggestion.hide(true);
                     }
                     else {
                         SearchSuggestion.show();
@@ -11222,7 +11332,7 @@ const PopsSearchSuggestion = {
                         /* 点击在目标input内 */
                         return;
                     }
-                    SearchSuggestion.hide();
+                    SearchSuggestion.hide(true);
                 }
             },
             /**
@@ -11347,29 +11457,39 @@ const PopsSearchSuggestion = {
                     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
@@ -11391,6 +11511,17 @@ const PopsSearchSuggestion = {
                 let cssText = this.getDynamicCSS();
                 PopsSafeUtils.setSafeHTML(this.$el.$dynamicCSS, cssText);
             },
+            /**
+             * 数据项的数量改变时调用
+             */
+            updateStyleSheet() {
+                // 更新z-index
+                SearchSuggestion.updateDynamicCSS();
+                // 更新宽度
+                SearchSuggestion.changeHintULElementWidth();
+                // 更新位置
+                SearchSuggestion.changeHintULElementPosition();
+            },
             /**
              * 更新页面显示的搜索结果
              * @param data
@@ -11409,7 +11540,7 @@ const PopsSearchSuggestion = {
                     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);
@@ -11433,15 +11564,32 @@ const PopsSearchSuggestion = {
             },
             /**
              * 隐藏搜索建议框
+             * @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;