@whitesev/pops 3.2.1 → 3.3.0

package/src/components/searchSuggestion/index.ts

@@ -1,813 +1,813 @@
-import { PopsHandler } from "../../handler/PopsHandler";
-import { popsDOMUtils } from "../../utils/PopsDOMUtils";
-import { popsUtils } from "../../utils/PopsUtils";
-import { PopsSearchSuggestionDefaultConfig } from "./defaultConfig";
-import { GlobalConfig } from "../../config/GlobalConfig";
-import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
-import type { PopsSearchSuggestionData, PopsSearchSuggestionConfig } from "./types/index";
-import { PopsCSS } from "../../PopsCSS";
-import type { PopsType } from "../../types/main";
-import { PopsCommonCSSClassName } from "../../config/CommonCSSClassName";
-
-export const PopsSearchSuggestion = {
-  init<T>(__config__: PopsSearchSuggestionConfig<T>) {
-    const guid = popsUtils.getRandomGUID();
-    // 设置当前类型
-    const popsType: PopsType = "searchSuggestion";
-
-    let config = PopsSearchSuggestionDefaultConfig();
-    config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-    config = popsUtils.assign(config, __config__);
-    // 如果$inputTarget为空，则根据$target
-    if (config.$inputTarget == null) {
-      config.$inputTarget = config.$target as HTMLInputElement;
-    }
-
-    const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
-    PopsHandler.handleInit($shadowRoot, [
-      {
-        name: "index",
-        css: PopsCSS.index,
-      },
-      {
-        name: "anim",
-        css: PopsCSS.anim,
-      },
-      {
-        name: "common",
-        css: PopsCSS.common,
-      },
-    ]);
-
-    if (config.style != null) {
-      const $css = popsDOMUtils.createElement("style", {
-        type: "text/css",
-        innerHTML: config.style,
-      });
-      $shadowRoot.appendChild($css);
-    }
-    /**
-     * 监听器的默认配置
-     */
-    const defaultListenerOption: AddEventListenerOptions = {
-      capture: true,
-      passive: true,
-    };
-    const SearchSuggestion = {
-      /**
-       * 当前的环境，可以是document，可以是shadowroot，默认是document
-       */
-      selfDocument: config.$selfDocument,
-      $el: {
-        /** 根元素 */
-        root: null as any as HTMLElement,
-        /**
-         * 包裹ul的容器元素
-         */
-        $dropdownWrapper: null as any as HTMLElement,
-        /** ul元素 */
-        $dropdownContainer: null as any as HTMLUListElement,
-        /**
-         * 箭头元素
-         */
-        $arrow: null as any as HTMLDivElement,
-        /** 动态更新CSS */
-        $dynamicCSS: null as any as HTMLStyleElement,
-      },
-      $evt: {
-        offInputChangeEvtHandler: [] as ((...args: any[]) => any)[],
-      },
-      $data: {
-        /** 是否结果为空 */
-        isEmpty: true,
-        /**
-         * 存储在元素上的操作的键名
-         */
-        storeNodeHandlerKey: "data-SearchSuggestion",
-      },
-      /**
-       * 初始化
-       * @param $parent 父元素
-       * @example
-       * .init();
-       * .setAllEvent();
-       */
-      init($parent = document.body || document.documentElement) {
-        SearchSuggestion.initEl();
-        SearchSuggestion.update(SearchSuggestion.getData());
-        SearchSuggestion.updateStyleSheet();
-
-        SearchSuggestion.hide();
-        $shadowRoot.appendChild(SearchSuggestion.$el.root);
-        $parent.appendChild($shadowContainer);
-      },
-      /**
-       * 初始化元素变量
-       */
-      initEl() {
-        SearchSuggestion.$el.root = SearchSuggestion.createSearchSelectElement();
-        Reflect.set(SearchSuggestion.$el.root, this.$data.storeNodeHandlerKey, SearchSuggestion);
-        SearchSuggestion.$el.$dynamicCSS =
-          SearchSuggestion.$el.root.querySelector<HTMLStyleElement>("style[data-dynamic]")!;
-        SearchSuggestion.$el.$dropdownWrapper = SearchSuggestion.$el.root.querySelector<HTMLElement>(
-          `.pops-${popsType}-search-suggestion-dropdown-wrapper`
-        )!;
-        SearchSuggestion.$el.$dropdownContainer = SearchSuggestion.$el.root.querySelector<HTMLUListElement>(
-          `ul.pops-${popsType}-search-suggestion-dropdown-container`
-        )!;
-        SearchSuggestion.$el.$arrow = SearchSuggestion.$el.root.querySelector<HTMLDivElement>(
-          `.pops-${popsType}-search-suggestion-arrow`
-        )!;
-      },
-      /**
-       * 获取数据
-       */
-      getData(): PopsSearchSuggestionData<T>[] {
-        return typeof config.data === "function" ? config.data() : config.data;
-      },
-      /**
-       * 更新数据
-       * @param data 数据
-       */
-      setData(data: PopsSearchSuggestionData<T>[]) {
-        (<PopsSearchSuggestionConfig<T>["data"]>config.data) = data;
-      },
-      /**
-       * 获取显示出搜索建议框的html
-       */
-      createSearchSelectElement() {
-        const $el = popsDOMUtils.createElement(
-          "div",
-          {
-            className: `pops pops-${popsType}-search-suggestion`,
-            innerHTML: /*html*/ `
-						<style type="text/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;
-							}
-						</style>
-						<style type="text/css">
-							.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 type="text/css" data-dynamic="true">
-							${SearchSuggestion.getDynamicCSS()}
-						</style>
-						<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>
-						<style type="text/css" data-user-css>
-							${config.style || ""}
-						</style>
-            <div class="pops-${popsType}-search-suggestion-dropdown-wrapper">
-              <ul class="pops-${popsType}-search-suggestion-dropdown-container ${PopsCommonCSSClassName.userSelectNone}">${
-                config.toSearhNotResultHTML
-              }</ul>
-            </div>
-            <!-- 箭头 -->
-						${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($el, config.className);
-        }
-        if (config.isAnimation) {
-          popsDOMUtils.addClassName($el, `pops-${popsType}-animation`);
-        }
-        if (config.useFoldAnimation) {
-          popsDOMUtils.addClassName($el, "el-zoom-in-top-animation");
-        }
-        return $el;
-      },
-      /**
-       * 动态获取CSS
-       */
-      getDynamicCSS() {
-        return /*css*/ `
-				.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-is-hover-bg-color: #f5f7fa;
-					--search-suggestion-item-is-select-bg-color: #409eff;
-				}
-				.pops-${popsType}-search-suggestion{
-					border: initial;
-					overflow: initial;
-					position: ${config.isAbsolute ? "absolute" : "fixed"};
-					z-index: ${PopsHandler.handleZIndex(config.zIndex)};
-				}
-        .pops-${popsType}-search-suggestion-dropdown-wrapper{
-					max-height: ${config.maxHeight};
-					border-radius: 4px;
-					box-shadow: 0 1px 6px var(--search-suggestion-box-shadow-color);
-					background-color: var(--search-suggestion-bg-color);
-					padding: 5px 0;
-					overflow-x: hidden;
-					overflow-y: auto;
-        }
-				.pops-${popsType}-search-suggestion-dropdown-wrapper ul.pops-${popsType}-search-suggestion-dropdown-container{
-					box-sizing: border-box;
-				}
-				// 建议框在上面时
-				.pops-${popsType}-search-suggestion[data-top-reverse] ul.pops-${popsType}-search-suggestion-dropdown-container{
-					display: flex;
-					flex-direction: column-reverse;
-				}
-				.pops-${popsType}-search-suggestion[data-top-reverse] ul.pops-${popsType}-search-suggestion-dropdown-container li{
-					flex-shrink: 0;
-				}
-				ul.pops-${popsType}-search-suggestion-dropdown-container li{
-					padding: 7px;
-					margin: 0;
-					clear: both;
-					color: var(--search-suggestion-item-color);
-					font-size: 14px;
-					list-style: none;
-					cursor: pointer;
-					transition: background .2s ease-in-out;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					width: 100%;
-				}
-				ul.pops-${popsType}-search-suggestion-dropdown-container li[data-none]{
-					text-align: center;
-					font-size: 12px;
-					color: var(--search-suggestion-item-none-color);
-				}
-				ul.pops-${popsType}-search-suggestion-dropdown-container li:not([data-none]):hover{
-					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-is-hover-bg-color: rgba(175, 175, 175, .1);
-					}
-				}
-				`;
-      },
-      /**
-       * 获取data-value值
-       * @param data 数据项
-       */
-      getItemDataValue(data: PopsSearchSuggestionData<T>) {
-        return data;
-      },
-      /**
-       * 获取显示出搜索建议框的每一项的html
-       * @param dataItem 当前项的值
-       * @param dateItemIndex 当前项的下标
-       */
-      createSearchItemLiElement(dataItem: PopsSearchSuggestionData<T>, dateItemIndex: number) {
-        const dataValue = SearchSuggestion.getItemDataValue(dataItem);
-        const $li = popsDOMUtils.createElement("li", {
-          className: `pops-${popsType}-search-suggestion-dropdown-item`,
-          "data-index": dateItemIndex,
-          "data-value": dataValue,
-        });
-        Reflect.set($li, "data-index", dateItemIndex);
-        Reflect.set($li, "data-value", dataValue);
-        // 项内容
-        const $itemInner = dataItem.itemView(dataItem, $li, config);
-        if (typeof $itemInner === "string") {
-          PopsSafeUtils.setSafeHTML($li, $itemInner);
-        } else {
-          popsDOMUtils.append($li, $itemInner);
-        }
-        // 删除按钮
-        const enableDeleteButton = dataItem.enableDeleteButton;
-        if (typeof enableDeleteButton === "boolean" && enableDeleteButton) {
-          const $deleteIcon = SearchSuggestion.createItemDeleteIcon();
-          popsDOMUtils.append($li, $deleteIcon);
-        }
-        popsDOMUtils.addClassName($li, PopsCommonCSSClassName.flexCenter);
-        popsDOMUtils.addClassName($li, PopsCommonCSSClassName.flexYCenter);
-        return $li;
-      },
-      /**
-       * 设置搜索建议框每一项的点击事件
-       * @param $searchItem 当前项的元素
-       */
-      setSearchItemClickEvent($searchItem: HTMLLIElement) {
-        popsDOMUtils.on(
-          $searchItem,
-          "click",
-          async (event) => {
-            popsDOMUtils.preventEvent(event);
-            const $click = event.target as HTMLLIElement;
-            const data = SearchSuggestion.getData();
-            const dataItem = Reflect.get($searchItem, "data-value") as PopsSearchSuggestionData<T>;
-            const isDelete = Boolean($click.closest(`.pops-${popsType}-delete-icon`));
-            if (isDelete) {
-              // 删除
-              if (typeof dataItem.deleteButtonClickCallback === "function") {
-                const result = await dataItem.deleteButtonClickCallback(event, $searchItem, dataItem, config);
-                if (typeof result === "boolean" && result) {
-                  data.splice(data.indexOf(dataItem), 1);
-                  $searchItem.remove();
-                }
-              }
-              if (!SearchSuggestion.$el.$dropdownContainer.children.length) {
-                // 全删完了
-                SearchSuggestion.clear();
-              }
-              SearchSuggestion.updateStyleSheet();
-            } else {
-              // 点击选择项
-              if (typeof dataItem.clickCallback === "function") {
-                const result = await dataItem.clickCallback(event, $searchItem, dataItem, config);
-                if (typeof result === "boolean" && result) {
-                  if (
-                    config.$inputTarget instanceof HTMLInputElement ||
-                    config.$inputTarget instanceof HTMLTextAreaElement
-                  ) {
-                    config.$inputTarget.value = String(dataItem.value);
-                  }
-                }
-              }
-            }
-          },
-          {
-            capture: true,
-          }
-        );
-      },
-      /**
-       * 设置搜索建议框每一项的选中事件
-       * @param $li 每一项元素
-       */
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      setSearchItemSelectEvent($li: HTMLLIElement) {
-        //  TODO
-      },
-      /**
-       * 监听输入框内容改变
-       */
-      setInputChangeEvent(option: AddEventListenerOptions = defaultListenerOption) {
-        // 必须是input或者textarea才有input事件
-        if (!(config.$inputTarget instanceof HTMLInputElement || config.$inputTarget instanceof HTMLTextAreaElement)) {
-          return;
-        }
-        // 是input输入框
-        // 禁用输入框自动提示
-        config.$inputTarget.setAttribute("autocomplete", "off");
-        // 内容改变事件
-        const listenerHandler = popsDOMUtils.onInput(
-          config.$inputTarget,
-          async () => {
-            const data = SearchSuggestion.getData();
-            const queryDataResult = await config.inputTargetChangeRefreshShowDataCallback(
-              config.$inputTarget.value,
-              data,
-              config
-            );
-            SearchSuggestion.update(queryDataResult);
-            SearchSuggestion.updateStyleSheet();
-          },
-          option
-        );
-        SearchSuggestion.$evt.offInputChangeEvtHandler.push(listenerHandler.off);
-      },
-      /**
-       * 移除输入框内容改变的监听
-       */
-      removeInputChangeEvent() {
-        for (let index = 0; index < SearchSuggestion.$evt.offInputChangeEvtHandler.length; index++) {
-          const handler = SearchSuggestion.$evt.offInputChangeEvtHandler[index];
-          handler();
-          SearchSuggestion.$evt.offInputChangeEvtHandler.splice(index, 1);
-          index--;
-        }
-      },
-      /**
-       * 显示搜索建议框的事件
-       */
-      showEvent() {
-        SearchSuggestion.updateStyleSheet();
-        if (config.toHideWithNotResult) {
-          if (SearchSuggestion.$data.isEmpty) {
-            SearchSuggestion.hide(true);
-          } else {
-            SearchSuggestion.show();
-          }
-        } else {
-          SearchSuggestion.show();
-        }
-      },
-      /**
-       * 设置显示搜索建议框的事件
-       */
-      setShowEvent(option: AddEventListenerOptions = defaultListenerOption) {
-        /* 焦点|点击事件*/
-        if (config.followPosition === "target") {
-          popsDOMUtils.on([config.$target], ["focus", "click"], SearchSuggestion.showEvent, option);
-        } else if (config.followPosition === "input") {
-          popsDOMUtils.on([config.$inputTarget], ["focus", "click"], SearchSuggestion.showEvent, option);
-        } else if (config.followPosition === "inputCursor") {
-          popsDOMUtils.on([config.$inputTarget], ["focus", "click", "input"], SearchSuggestion.showEvent, option);
-        } else {
-          throw new Error("未知followPosition：" + config.followPosition);
-        }
-      },
-      /**
-       * 移除显示搜索建议框的事件
-       */
-      removeShowEvent(option: AddEventListenerOptions = defaultListenerOption) {
-        /* 焦点|点击事件*/
-        popsDOMUtils.off([config.$target, config.$inputTarget], ["focus", "click"], SearchSuggestion.showEvent, option);
-        // 内容改变事件
-        popsDOMUtils.off([config.$inputTarget], ["input"], SearchSuggestion.showEvent, option);
-      },
-      /**
-       * 隐藏搜索建议框的事件
-       * @param event
-       */
-      hideEvent(event: PointerEvent | MouseEvent) {
-        if (event.target instanceof Node) {
-          if ($shadowContainer.contains(event.target)) {
-            // 点击在shadow上的
-            return;
-          }
-          if (config.$target.contains(event.target)) {
-            // 点击在目标元素内
-            return;
-          }
-          if (config.$inputTarget.contains(event.target)) {
-            // 点击在目标input内
-            return;
-          }
-          SearchSuggestion.hide(true);
-        }
-      },
-      /**
-       * 设置隐藏搜索建议框的事件
-       */
-      setHideEvent(option: AddEventListenerOptions = defaultListenerOption) {
-        // 全局点击事件
-        // 全局触摸屏点击事件
-        if (Array.isArray(SearchSuggestion.selfDocument)) {
-          SearchSuggestion.selfDocument.forEach(($checkParent) => {
-            popsDOMUtils.on($checkParent, ["click", "touchstart"], SearchSuggestion.hideEvent, option);
-          });
-        } else {
-          popsDOMUtils.on(SearchSuggestion.selfDocument, ["click", "touchstart"], SearchSuggestion.hideEvent, option);
-        }
-      },
-      /**
-       * 移除隐藏搜索建议框的事件
-       */
-      removeHideEvent(option: AddEventListenerOptions = defaultListenerOption) {
-        if (Array.isArray(SearchSuggestion.selfDocument)) {
-          SearchSuggestion.selfDocument.forEach(($checkParent) => {
-            popsDOMUtils.off($checkParent, ["click", "touchstart"], SearchSuggestion.hideEvent, option);
-          });
-        } else {
-          popsDOMUtils.off(SearchSuggestion.selfDocument, ["click", "touchstart"], SearchSuggestion.hideEvent, option);
-        }
-      },
-      /**
-       * 设置所有监听，包括（input值改变、全局点击判断显示/隐藏建议框）
-       */
-      setAllEvent(option: AddEventListenerOptions = defaultListenerOption) {
-        SearchSuggestion.setInputChangeEvent(option);
-        SearchSuggestion.setHideEvent(option);
-        SearchSuggestion.setShowEvent(option);
-      },
-      /**
-       * 移除所有监听
-       */
-      removeAllEvent(option: AddEventListenerOptions = defaultListenerOption) {
-        SearchSuggestion.removeInputChangeEvent();
-        SearchSuggestion.removeHideEvent(option);
-        SearchSuggestion.removeShowEvent(option);
-      },
-      /**
-       * 获取删除按钮的html
-       */
-      createItemDeleteIcon(size = 16, fill = "#bababa") {
-        const $svg = popsDOMUtils.parseTextToDOM(/*html*/ `
-					<svg class="pops-${popsType}-delete-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
-						<path d="M512 883.2A371.2 371.2 0 1 0 140.8 512 371.2 371.2 0 0 0 512 883.2z m0 64a435.2 435.2 0 1 1 435.2-435.2 435.2 435.2 0 0 1-435.2 435.2z"></path>
-						<path d="M557.056 512l122.368 122.368a31.744 31.744 0 1 1-45.056 45.056L512 557.056l-122.368 122.368a31.744 31.744 0 1 1-45.056-45.056L466.944 512 344.576 389.632a31.744 31.744 0 1 1 45.056-45.056L512 466.944l122.368-122.368a31.744 31.744 0 1 1 45.056 45.056z"></path>
-					</svg>
-        			`);
-        return $svg;
-      },
-      /**
-       * 设置当前正在搜索中的提示
-       */
-      setPromptsInSearch() {
-        const $isSearching = popsDOMUtils.createElement("li", {
-          className: `pops-${popsType}-search-suggestion-dropdown-searching-item`,
-          innerHTML: config.searchingTip,
-        });
-        SearchSuggestion.addItem($isSearching);
-      },
-      /**
-       * 移除正在搜索中的提示
-       */
-      removePromptsInSearch() {
-        SearchSuggestion.$el.$dropdownContainer
-          .querySelector<HTMLLIElement>(`li.pops-${popsType}-search-suggestion-dropdown-searching-item`)
-          ?.remove();
-      },
-      /**
-       * 更新搜索建议框的位置(top、left)
-       * 因为目标元素可能是动态隐藏的
-       * @param target 目标元素
-       * @param checkPositonAgain 是否在更新位置信息后检测更新位置信息，默认true
-       */
-      changeHintULElementPosition(target = config.$target ?? config.$inputTarget, checkPositonAgain: boolean = true) {
-        let targetRect: DOMRect | null = null;
-        if (config.followPosition === "inputCursor") {
-          targetRect = popsDOMUtils.getTextBoundingRect(
-            config.$inputTarget,
-            config.$inputTarget.selectionStart || 0,
-            config.$inputTarget.selectionEnd || 0,
-            false
-          );
-        } else {
-          targetRect = config.isAbsolute ? popsDOMUtils.offset(target) : target.getBoundingClientRect();
-        }
-        if (targetRect == null) {
-          return;
-        }
-        // 文档最大高度
-        let documentHeight = document.documentElement.clientHeight;
-        if (config.isAbsolute) {
-          // 绝对定位
-          documentHeight = popsDOMUtils.height(document);
-        }
-        // 文档最大宽度
-        const documentWidth = popsDOMUtils.width(document);
-        // 箭头
-        const arrowHeight = config.useArrow ? popsDOMUtils.height(SearchSuggestion.$el.$arrow) : 0;
-
-        let position = config.position;
-        if (config.position === "auto") {
-          // 需目标高度+搜索建议框高度大于文档高度，则显示在上面
-          const targetBottom = targetRect.bottom;
-          // 容器整体的高度
-          const searchSuggestionContainerHeight =
-            popsDOMUtils.height(SearchSuggestion.$el.$dropdownWrapper) + arrowHeight;
-          if (targetBottom + searchSuggestionContainerHeight > documentHeight) {
-            // 在上面
-            position = "top";
-          } else {
-            // 在下面
-            position = "bottom";
-          }
-        }
-        if (position === "top") {
-          // 在上面
-          if (config.positionTopToReverse) {
-            // 自动翻转
-            SearchSuggestion.$el.root.setAttribute("data-top-reverse", "true");
-          }
-          if (config.useFoldAnimation) {
-            // 翻转折叠
-            SearchSuggestion.$el.root.setAttribute("data-popper-placement", "top");
-          }
-          const bottom = documentHeight - targetRect.top + config.topDistance + arrowHeight;
-          SearchSuggestion.$el.root.style.top = "";
-          SearchSuggestion.$el.root.style.bottom = bottom + "px";
-        } else if (position === "bottom") {
-          // 在下面
-          if (config.useFoldAnimation) {
-            SearchSuggestion.$el.root.setAttribute("data-popper-placement", "bottom-center");
-          }
-          const top = targetRect.height + targetRect.top + config.topDistance + arrowHeight;
-          SearchSuggestion.$el.root.removeAttribute("data-top-reverse");
-          SearchSuggestion.$el.root.style.bottom = "";
-          SearchSuggestion.$el.root.style.top = top + "px";
-        }
-        let left = targetRect.left;
-        const hintUIWidth = popsDOMUtils.width(SearchSuggestion.$el.$dropdownWrapper);
-        if (hintUIWidth > documentWidth) {
-          // 超出宽度
-          left = left + documentWidth - hintUIWidth;
-        }
-        SearchSuggestion.$el.root.style.left = left + "px";
-
-        // 如果更新前在下面的话且高度超出了屏幕
-        // 这时候会有滚动条，会造成位置偏移
-        // 更新后的位置却在上面，这时候的位置信息不对齐
-        // 需重新更新位置
-        // 此情况一般是config.position === "auto"
-        if (checkPositonAgain) {
-          SearchSuggestion.changeHintULElementPosition(target, !checkPositonAgain);
-        }
-      },
-      /**
-       * 更新搜索建议框的width
-       * 因为目标元素可能是动态隐藏的
-       * @param target 目标元素
-       */
-      changeHintULElementWidth(target = config.$target ?? config.$inputTarget) {
-        const targetRect = target.getBoundingClientRect();
-        if (config.followTargetWidth) {
-          SearchSuggestion.$el.$dropdownWrapper.style.width = targetRect.width + "px";
-        } else {
-          SearchSuggestion.$el.$dropdownWrapper.style.width = config.width;
-        }
-      },
-      /**
-       * 动态更新CSS
-       */
-      updateDynamicCSS() {
-        const cssText = SearchSuggestion.getDynamicCSS();
-        PopsSafeUtils.setSafeHTML(SearchSuggestion.$el.$dynamicCSS, cssText);
-      },
-      /**
-       * 数据项的数量改变时调用
-       *
-       * - 更新css
-       * - 更新建议框的宽度
-       * - 更新建议框的位置
-       */
-      updateStyleSheet() {
-        // 更新z-index
-        SearchSuggestion.updateDynamicCSS();
-        // 更新宽度
-        SearchSuggestion.changeHintULElementWidth();
-        // 更新位置
-        SearchSuggestion.changeHintULElementPosition();
-      },
-      /**
-       * 添加搜索结果元素
-       * @param $item 项元素
-       */
-      addItem($item: HTMLElement | DocumentFragment) {
-        SearchSuggestion.$el.$dropdownContainer.appendChild($item);
-      },
-      /**
-       * 更新页面显示的搜索结果
-       * @param updateData
-       */
-      update(updateData: PopsSearchSuggestionData<T>[] = []) {
-        if (!Array.isArray(updateData)) {
-          throw new TypeError("传入的数据不是数组");
-        }
-        const data = updateData;
-        // 清空已有的搜索结果
-        if (data.length) {
-          SearchSuggestion.$data.isEmpty = false;
-          if (config.toHideWithNotResult) {
-            SearchSuggestion.show();
-          }
-          SearchSuggestion.clear(true);
-          // 添加进ul中
-          const fragment = document.createDocumentFragment();
-          data.forEach((item, index) => {
-            const $item = SearchSuggestion.createSearchItemLiElement(item, index);
-            SearchSuggestion.setSearchItemClickEvent($item);
-            SearchSuggestion.setSearchItemSelectEvent($item);
-            fragment.appendChild($item);
-          });
-          SearchSuggestion.addItem(fragment);
-        } else {
-          // 清空
-          SearchSuggestion.clear();
-        }
-      },
-      /**
-       * 清空当前的搜索结果并显示无结果
-       * @param [onlyClearView=false] 是否仅清空元素，默认false
-       */
-      clear(onlyClearView: boolean = false) {
-        PopsSafeUtils.setSafeHTML(SearchSuggestion.$el.$dropdownContainer, "");
-        if (onlyClearView) {
-          return;
-        }
-        SearchSuggestion.$data.isEmpty = true;
-        let $noResult;
-        if (typeof config.toSearhNotResultHTML === "string") {
-          $noResult = popsDOMUtils.parseTextToDOM(config.toSearhNotResultHTML);
-        } else {
-          $noResult = config.toSearhNotResultHTML();
-        }
-        SearchSuggestion.addItem($noResult);
-        if (config.toHideWithNotResult) {
-          SearchSuggestion.hide();
-        }
-      },
-      /**
-       * 隐藏搜索建议框
-       * @param useAnimationToHide 是否使用动画隐藏
-       */
-      hide(useAnimationToHide: boolean = false) {
-        if (config.useFoldAnimation) {
-          if (!useAnimationToHide) {
-            // 去掉动画
-            popsDOMUtils.removeClassName(SearchSuggestion.$el.root, "el-zoom-in-top-animation");
-          }
-          popsDOMUtils.addClassName(SearchSuggestion.$el.root, "el-zoom-in-top-animation");
-          popsDOMUtils.addClassName(SearchSuggestion.$el.root, "el-zoom-in-top-animation-hide");
-          popsDOMUtils.removeClassName(SearchSuggestion.$el.root, "el-zoom-in-top-animation-show");
-        } else {
-          SearchSuggestion.$el.root.style.display = "none";
-        }
-      },
-      /**
-       * 显示搜索建议框
-       */
-      show() {
-        SearchSuggestion.$el.root.style.display = "";
-        if (config.useFoldAnimation) {
-          popsDOMUtils.addClassName(SearchSuggestion.$el.root, "el-zoom-in-top-animation");
-          popsDOMUtils.removeClassName(SearchSuggestion.$el.root, "el-zoom-in-top-animation-hide");
-          popsDOMUtils.addClassName(SearchSuggestion.$el.root, "el-zoom-in-top-animation-show");
-        }
-      },
-    };
-    return SearchSuggestion;
-  },
-};
+import { PopsHandler } from "../../handler/PopsHandler";
+import { popsDOMUtils } from "../../utils/PopsDOMUtils";
+import { popsUtils } from "../../utils/PopsUtils";
+import { PopsSearchSuggestionDefaultConfig } from "./defaultConfig";
+import { GlobalConfig } from "../../config/GlobalConfig";
+import { PopsSafeUtils } from "../../utils/PopsSafeUtils";
+import type { PopsSearchSuggestionData, PopsSearchSuggestionConfig } from "./types/index";
+import { PopsCSS } from "../../PopsCSS";
+import type { PopsType } from "../../types/main";
+import { PopsCommonCSSClassName } from "../../config/CommonCSSClassName";
+
+export const PopsSearchSuggestion = {
+  init<T>(__config__: PopsSearchSuggestionConfig<T>) {
+    const guid = popsUtils.getRandomGUID();
+    // 设置当前类型
+    const popsType: PopsType = "searchSuggestion";
+
+    let config = PopsSearchSuggestionDefaultConfig();
+    config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+    config = popsUtils.assign(config, __config__);
+    // 如果$inputTarget为空，则根据$target
+    if (config.$inputTarget == null) {
+      config.$inputTarget = config.$target as HTMLInputElement;
+    }
+
+    const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
+    PopsHandler.handleInit($shadowRoot, [
+      {
+        name: "index",
+        css: PopsCSS.index,
+      },
+      {
+        name: "anim",
+        css: PopsCSS.anim,
+      },
+      {
+        name: "common",
+        css: PopsCSS.common,
+      },
+    ]);
+
+    if (config.style != null) {
+      const $css = popsDOMUtils.createElement("style", {
+        type: "text/css",
+        innerHTML: config.style,
+      });
+      $shadowRoot.appendChild($css);
+    }
+    /**
+     * 监听器的默认配置
+     */
+    const defaultListenerOption: AddEventListenerOptions = {
+      capture: true,
+      passive: true,
+    };
+    const SearchSuggestion = {
+      /**
+       * 当前的环境，可以是document，可以是shadowroot，默认是document
+       */
+      selfDocument: config.$selfDocument,
+      $el: {
+        /** 根元素 */
+        root: null as any as HTMLElement,
+        /**
+         * 包裹ul的容器元素
+         */
+        $dropdownWrapper: null as any as HTMLElement,
+        /** ul元素 */
+        $dropdownContainer: null as any as HTMLUListElement,
+        /**
+         * 箭头元素
+         */
+        $arrow: null as any as HTMLDivElement,
+        /** 动态更新CSS */
+        $dynamicCSS: null as any as HTMLStyleElement,
+      },
+      $evt: {
+        offInputChangeEvtHandler: [] as ((...args: any[]) => any)[],
+      },
+      $data: {
+        /** 是否结果为空 */
+        isEmpty: true,
+        /**
+         * 存储在元素上的操作的键名
+         */
+        storeNodeHandlerKey: "data-SearchSuggestion",
+      },
+      /**
+       * 初始化
+       * @param $parent 父元素
+       * @example
+       * .init();
+       * .setAllEvent();
+       */
+      init($parent = document.body || document.documentElement) {
+        SearchSuggestion.initEl();
+        SearchSuggestion.update(SearchSuggestion.getData());
+        SearchSuggestion.updateStyleSheet();
+
+        SearchSuggestion.hide();
+        $shadowRoot.appendChild(SearchSuggestion.$el.root);
+        $parent.appendChild($shadowContainer);
+      },
+      /**
+       * 初始化元素变量
+       */
+      initEl() {
+        SearchSuggestion.$el.root = SearchSuggestion.createSearchSelectElement();
+        Reflect.set(SearchSuggestion.$el.root, this.$data.storeNodeHandlerKey, SearchSuggestion);
+        SearchSuggestion.$el.$dynamicCSS =
+          SearchSuggestion.$el.root.querySelector<HTMLStyleElement>("style[data-dynamic]")!;
+        SearchSuggestion.$el.$dropdownWrapper = SearchSuggestion.$el.root.querySelector<HTMLElement>(
+          `.pops-${popsType}-search-suggestion-dropdown-wrapper`
+        )!;
+        SearchSuggestion.$el.$dropdownContainer = SearchSuggestion.$el.root.querySelector<HTMLUListElement>(
+          `ul.pops-${popsType}-search-suggestion-dropdown-container`
+        )!;
+        SearchSuggestion.$el.$arrow = SearchSuggestion.$el.root.querySelector<HTMLDivElement>(
+          `.pops-${popsType}-search-suggestion-arrow`
+        )!;
+      },
+      /**
+       * 获取数据
+       */
+      getData(): PopsSearchSuggestionData<T>[] {
+        return typeof config.data === "function" ? config.data() : config.data;
+      },
+      /**
+       * 更新数据
+       * @param data 数据
+       */
+      setData(data: PopsSearchSuggestionData<T>[]) {
+        (<PopsSearchSuggestionConfig<T>["data"]>config.data) = data;
+      },
+      /**
+       * 获取显示出搜索建议框的html
+       */
+      createSearchSelectElement() {
+        const $el = popsDOMUtils.createElement(
+          "div",
+          {
+            className: `pops pops-${popsType}-search-suggestion`,
+            innerHTML: /*html*/ `
+						<style type="text/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;
+							}
+						</style>
+						<style type="text/css">
+							.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 type="text/css" data-dynamic="true">
+							${SearchSuggestion.getDynamicCSS()}
+						</style>
+						<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>
+						<style type="text/css" data-user-css>
+							${config.style || ""}
+						</style>
+            <div class="pops-${popsType}-search-suggestion-dropdown-wrapper">
+              <ul class="pops-${popsType}-search-suggestion-dropdown-container ${PopsCommonCSSClassName.userSelectNone}">${
+                config.toSearhNotResultHTML
+              }</ul>
+            </div>
+            <!-- 箭头 -->
+						${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($el, config.className);
+        }
+        if (config.isAnimation) {
+          popsDOMUtils.addClassName($el, `pops-${popsType}-animation`);
+        }
+        if (config.useFoldAnimation) {
+          popsDOMUtils.addClassName($el, "el-zoom-in-top-animation");
+        }
+        return $el;
+      },
+      /**
+       * 动态获取CSS
+       */
+      getDynamicCSS() {
+        return /*css*/ `
+				.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-is-hover-bg-color: #f5f7fa;
+					--search-suggestion-item-is-select-bg-color: #409eff;
+				}
+				.pops-${popsType}-search-suggestion{
+					border: initial;
+					overflow: initial;
+					position: ${config.isAbsolute ? "absolute" : "fixed"};
+					z-index: ${PopsHandler.handleZIndex(config.zIndex)};
+				}
+        .pops-${popsType}-search-suggestion-dropdown-wrapper{
+					max-height: ${config.maxHeight};
+					border-radius: 4px;
+					box-shadow: 0 1px 6px var(--search-suggestion-box-shadow-color);
+					background-color: var(--search-suggestion-bg-color);
+					padding: 5px 0;
+					overflow-x: hidden;
+					overflow-y: auto;
+        }
+				.pops-${popsType}-search-suggestion-dropdown-wrapper ul.pops-${popsType}-search-suggestion-dropdown-container{
+					box-sizing: border-box;
+				}
+				// 建议框在上面时
+				.pops-${popsType}-search-suggestion[data-top-reverse] ul.pops-${popsType}-search-suggestion-dropdown-container{
+					display: flex;
+					flex-direction: column-reverse;
+				}
+				.pops-${popsType}-search-suggestion[data-top-reverse] ul.pops-${popsType}-search-suggestion-dropdown-container li{
+					flex-shrink: 0;
+				}
+				ul.pops-${popsType}-search-suggestion-dropdown-container li{
+					padding: 7px;
+					margin: 0;
+					clear: both;
+					color: var(--search-suggestion-item-color);
+					font-size: 14px;
+					list-style: none;
+					cursor: pointer;
+					transition: background .2s ease-in-out;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					width: 100%;
+				}
+				ul.pops-${popsType}-search-suggestion-dropdown-container li[data-none]{
+					text-align: center;
+					font-size: 12px;
+					color: var(--search-suggestion-item-none-color);
+				}
+				ul.pops-${popsType}-search-suggestion-dropdown-container li:not([data-none]):hover{
+					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-is-hover-bg-color: rgba(175, 175, 175, .1);
+					}
+				}
+				`;
+      },
+      /**
+       * 获取data-value值
+       * @param data 数据项
+       */
+      getItemDataValue(data: PopsSearchSuggestionData<T>) {
+        return data;
+      },
+      /**
+       * 获取显示出搜索建议框的每一项的html
+       * @param dataItem 当前项的值
+       * @param dateItemIndex 当前项的下标
+       */
+      createSearchItemLiElement(dataItem: PopsSearchSuggestionData<T>, dateItemIndex: number) {
+        const dataValue = SearchSuggestion.getItemDataValue(dataItem);
+        const $li = popsDOMUtils.createElement("li", {
+          className: `pops-${popsType}-search-suggestion-dropdown-item`,
+          "data-index": dateItemIndex,
+          "data-value": dataValue,
+        });
+        Reflect.set($li, "data-index", dateItemIndex);
+        Reflect.set($li, "data-value", dataValue);
+        // 项内容
+        const $itemInner = dataItem.itemView(dataItem, $li, config);
+        if (typeof $itemInner === "string") {
+          PopsSafeUtils.setSafeHTML($li, $itemInner);
+        } else {
+          popsDOMUtils.append($li, $itemInner);
+        }
+        // 删除按钮
+        const enableDeleteButton = dataItem.enableDeleteButton;
+        if (typeof enableDeleteButton === "boolean" && enableDeleteButton) {
+          const $deleteIcon = SearchSuggestion.createItemDeleteIcon();
+          popsDOMUtils.append($li, $deleteIcon);
+        }
+        popsDOMUtils.addClassName($li, PopsCommonCSSClassName.flexCenter);
+        popsDOMUtils.addClassName($li, PopsCommonCSSClassName.flexYCenter);
+        return $li;
+      },
+      /**
+       * 设置搜索建议框每一项的点击事件
+       * @param $searchItem 当前项的元素
+       */
+      setSearchItemClickEvent($searchItem: HTMLLIElement) {
+        popsDOMUtils.on(
+          $searchItem,
+          "click",
+          async (event) => {
+            popsDOMUtils.preventEvent(event);
+            const $click = event.target as HTMLLIElement;
+            const data = SearchSuggestion.getData();
+            const dataItem = Reflect.get($searchItem, "data-value") as PopsSearchSuggestionData<T>;
+            const isDelete = Boolean($click.closest(`.pops-${popsType}-delete-icon`));
+            if (isDelete) {
+              // 删除
+              if (typeof dataItem.deleteButtonClickCallback === "function") {
+                const result = await dataItem.deleteButtonClickCallback(event, $searchItem, dataItem, config);
+                if (typeof result === "boolean" && result) {
+                  data.splice(data.indexOf(dataItem), 1);
+                  $searchItem.remove();
+                }
+              }
+              if (!SearchSuggestion.$el.$dropdownContainer.children.length) {
+                // 全删完了
+                SearchSuggestion.clear();
+              }
+              SearchSuggestion.updateStyleSheet();
+            } else {
+              // 点击选择项
+              if (typeof dataItem.clickCallback === "function") {
+                const result = await dataItem.clickCallback(event, $searchItem, dataItem, config);
+                if (typeof result === "boolean" && result) {
+                  if (
+                    config.$inputTarget instanceof HTMLInputElement ||
+                    config.$inputTarget instanceof HTMLTextAreaElement
+                  ) {
+                    config.$inputTarget.value = String(dataItem.value);
+                  }
+                }
+              }
+            }
+          },
+          {
+            capture: true,
+          }
+        );
+      },
+      /**
+       * 设置搜索建议框每一项的选中事件
+       * @param $li 每一项元素
+       */
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      setSearchItemSelectEvent($li: HTMLLIElement) {
+        //  TODO
+      },
+      /**
+       * 监听输入框内容改变
+       */
+      setInputChangeEvent(option: AddEventListenerOptions = defaultListenerOption) {
+        // 必须是input或者textarea才有input事件
+        if (!(config.$inputTarget instanceof HTMLInputElement || config.$inputTarget instanceof HTMLTextAreaElement)) {
+          return;
+        }
+        // 是input输入框
+        // 禁用输入框自动提示
+        config.$inputTarget.setAttribute("autocomplete", "off");
+        // 内容改变事件
+        const listenerHandler = popsDOMUtils.onInput(
+          config.$inputTarget,
+          async () => {
+            const data = SearchSuggestion.getData();
+            const queryDataResult = await config.inputTargetChangeRefreshShowDataCallback(
+              config.$inputTarget.value,
+              data,
+              config
+            );
+            SearchSuggestion.update(queryDataResult);
+            SearchSuggestion.updateStyleSheet();
+          },
+          option
+        );
+        SearchSuggestion.$evt.offInputChangeEvtHandler.push(listenerHandler.off);
+      },
+      /**
+       * 移除输入框内容改变的监听
+       */
+      removeInputChangeEvent() {
+        for (let index = 0; index < SearchSuggestion.$evt.offInputChangeEvtHandler.length; index++) {
+          const handler = SearchSuggestion.$evt.offInputChangeEvtHandler[index];
+          handler();
+          SearchSuggestion.$evt.offInputChangeEvtHandler.splice(index, 1);
+          index--;
+        }
+      },
+      /**
+       * 显示搜索建议框的事件
+       */
+      showEvent() {
+        SearchSuggestion.updateStyleSheet();
+        if (config.toHideWithNotResult) {
+          if (SearchSuggestion.$data.isEmpty) {
+            SearchSuggestion.hide(true);
+          } else {
+            SearchSuggestion.show();
+          }
+        } else {
+          SearchSuggestion.show();
+        }
+      },
+      /**
+       * 设置显示搜索建议框的事件
+       */
+      setShowEvent(option: AddEventListenerOptions = defaultListenerOption) {
+        /* 焦点|点击事件*/
+        if (config.followPosition === "target") {
+          popsDOMUtils.on([config.$target], ["focus", "click"], SearchSuggestion.showEvent, option);
+        } else if (config.followPosition === "input") {
+          popsDOMUtils.on([config.$inputTarget], ["focus", "click"], SearchSuggestion.showEvent, option);
+        } else if (config.followPosition === "inputCursor") {
+          popsDOMUtils.on([config.$inputTarget], ["focus", "click", "input"], SearchSuggestion.showEvent, option);
+        } else {
+          throw new Error("未知followPosition：" + config.followPosition);
+        }
+      },
+      /**
+       * 移除显示搜索建议框的事件
+       */
+      removeShowEvent(option: AddEventListenerOptions = defaultListenerOption) {
+        /* 焦点|点击事件*/
+        popsDOMUtils.off([config.$target, config.$inputTarget], ["focus", "click"], SearchSuggestion.showEvent, option);
+        // 内容改变事件
+        popsDOMUtils.off([config.$inputTarget], ["input"], SearchSuggestion.showEvent, option);
+      },
+      /**
+       * 隐藏搜索建议框的事件
+       * @param event
+       */
+      hideEvent(event: PointerEvent | MouseEvent) {
+        if (event.target instanceof Node) {
+          if ($shadowContainer.contains(event.target)) {
+            // 点击在shadow上的
+            return;
+          }
+          if (config.$target.contains(event.target)) {
+            // 点击在目标元素内
+            return;
+          }
+          if (config.$inputTarget.contains(event.target)) {
+            // 点击在目标input内
+            return;
+          }
+          SearchSuggestion.hide(true);
+        }
+      },
+      /**
+       * 设置隐藏搜索建议框的事件
+       */
+      setHideEvent(option: AddEventListenerOptions = defaultListenerOption) {
+        // 全局点击事件
+        // 全局触摸屏点击事件
+        if (Array.isArray(SearchSuggestion.selfDocument)) {
+          SearchSuggestion.selfDocument.forEach(($checkParent) => {
+            popsDOMUtils.on($checkParent, ["click", "touchstart"], SearchSuggestion.hideEvent, option);
+          });
+        } else {
+          popsDOMUtils.on(SearchSuggestion.selfDocument, ["click", "touchstart"], SearchSuggestion.hideEvent, option);
+        }
+      },
+      /**
+       * 移除隐藏搜索建议框的事件
+       */
+      removeHideEvent(option: AddEventListenerOptions = defaultListenerOption) {
+        if (Array.isArray(SearchSuggestion.selfDocument)) {
+          SearchSuggestion.selfDocument.forEach(($checkParent) => {
+            popsDOMUtils.off($checkParent, ["click", "touchstart"], SearchSuggestion.hideEvent, option);
+          });
+        } else {
+          popsDOMUtils.off(SearchSuggestion.selfDocument, ["click", "touchstart"], SearchSuggestion.hideEvent, option);
+        }
+      },
+      /**
+       * 设置所有监听，包括（input值改变、全局点击判断显示/隐藏建议框）
+       */
+      setAllEvent(option: AddEventListenerOptions = defaultListenerOption) {
+        SearchSuggestion.setInputChangeEvent(option);
+        SearchSuggestion.setHideEvent(option);
+        SearchSuggestion.setShowEvent(option);
+      },
+      /**
+       * 移除所有监听
+       */
+      removeAllEvent(option: AddEventListenerOptions = defaultListenerOption) {
+        SearchSuggestion.removeInputChangeEvent();
+        SearchSuggestion.removeHideEvent(option);
+        SearchSuggestion.removeShowEvent(option);
+      },
+      /**
+       * 获取删除按钮的html
+       */
+      createItemDeleteIcon(size = 16, fill = "#bababa") {
+        const $svg = popsDOMUtils.parseTextToDOM(/*html*/ `
+					<svg class="pops-${popsType}-delete-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="${fill}">
+						<path d="M512 883.2A371.2 371.2 0 1 0 140.8 512 371.2 371.2 0 0 0 512 883.2z m0 64a435.2 435.2 0 1 1 435.2-435.2 435.2 435.2 0 0 1-435.2 435.2z"></path>
+						<path d="M557.056 512l122.368 122.368a31.744 31.744 0 1 1-45.056 45.056L512 557.056l-122.368 122.368a31.744 31.744 0 1 1-45.056-45.056L466.944 512 344.576 389.632a31.744 31.744 0 1 1 45.056-45.056L512 466.944l122.368-122.368a31.744 31.744 0 1 1 45.056 45.056z"></path>
+					</svg>
+        			`);
+        return $svg;
+      },
+      /**
+       * 设置当前正在搜索中的提示
+       */
+      setPromptsInSearch() {
+        const $isSearching = popsDOMUtils.createElement("li", {
+          className: `pops-${popsType}-search-suggestion-dropdown-searching-item`,
+          innerHTML: config.searchingTip,
+        });
+        SearchSuggestion.addItem($isSearching);
+      },
+      /**
+       * 移除正在搜索中的提示
+       */
+      removePromptsInSearch() {
+        SearchSuggestion.$el.$dropdownContainer
+          .querySelector<HTMLLIElement>(`li.pops-${popsType}-search-suggestion-dropdown-searching-item`)
+          ?.remove();
+      },
+      /**
+       * 更新搜索建议框的位置(top、left)
+       * 因为目标元素可能是动态隐藏的
+       * @param target 目标元素
+       * @param checkPositonAgain 是否在更新位置信息后检测更新位置信息，默认true
+       */
+      changeHintULElementPosition(target = config.$target ?? config.$inputTarget, checkPositonAgain: boolean = true) {
+        let targetRect: DOMRect | null = null;
+        if (config.followPosition === "inputCursor") {
+          targetRect = popsDOMUtils.getTextBoundingRect(
+            config.$inputTarget,
+            config.$inputTarget.selectionStart || 0,
+            config.$inputTarget.selectionEnd || 0,
+            false
+          );
+        } else {
+          targetRect = config.isAbsolute ? popsDOMUtils.offset(target) : target.getBoundingClientRect();
+        }
+        if (targetRect == null) {
+          return;
+        }
+        // 文档最大高度
+        let documentHeight = document.documentElement.clientHeight;
+        if (config.isAbsolute) {
+          // 绝对定位
+          documentHeight = popsDOMUtils.height(document);
+        }
+        // 文档最大宽度
+        const documentWidth = popsDOMUtils.width(document);
+        // 箭头
+        const arrowHeight = config.useArrow ? popsDOMUtils.height(SearchSuggestion.$el.$arrow) : 0;
+
+        let position = config.position;
+        if (config.position === "auto") {
+          // 需目标高度+搜索建议框高度大于文档高度，则显示在上面
+          const targetBottom = targetRect.bottom;
+          // 容器整体的高度
+          const searchSuggestionContainerHeight =
+            popsDOMUtils.height(SearchSuggestion.$el.$dropdownWrapper) + arrowHeight;
+          if (targetBottom + searchSuggestionContainerHeight > documentHeight) {
+            // 在上面
+            position = "top";
+          } else {
+            // 在下面
+            position = "bottom";
+          }
+        }
+        if (position === "top") {
+          // 在上面
+          if (config.positionTopToReverse) {
+            // 自动翻转
+            SearchSuggestion.$el.root.setAttribute("data-top-reverse", "true");
+          }
+          if (config.useFoldAnimation) {
+            // 翻转折叠
+            SearchSuggestion.$el.root.setAttribute("data-popper-placement", "top");
+          }
+          const bottom = documentHeight - targetRect.top + config.topDistance + arrowHeight;
+          SearchSuggestion.$el.root.style.top = "";
+          SearchSuggestion.$el.root.style.bottom = bottom + "px";
+        } else if (position === "bottom") {
+          // 在下面
+          if (config.useFoldAnimation) {
+            SearchSuggestion.$el.root.setAttribute("data-popper-placement", "bottom-center");
+          }
+          const top = targetRect.height + targetRect.top + config.topDistance + arrowHeight;
+          SearchSuggestion.$el.root.removeAttribute("data-top-reverse");
+          SearchSuggestion.$el.root.style.bottom = "";
+          SearchSuggestion.$el.root.style.top = top + "px";
+        }
+        let left = targetRect.left;
+        const hintUIWidth = popsDOMUtils.width(SearchSuggestion.$el.$dropdownWrapper);
+        if (hintUIWidth > documentWidth) {
+          // 超出宽度
+          left = left + documentWidth - hintUIWidth;
+        }
+        SearchSuggestion.$el.root.style.left = left + "px";
+
+        // 如果更新前在下面的话且高度超出了屏幕
+        // 这时候会有滚动条，会造成位置偏移
+        // 更新后的位置却在上面，这时候的位置信息不对齐
+        // 需重新更新位置
+        // 此情况一般是config.position === "auto"
+        if (checkPositonAgain) {
+          SearchSuggestion.changeHintULElementPosition(target, !checkPositonAgain);
+        }
+      },
+      /**
+       * 更新搜索建议框的width
+       * 因为目标元素可能是动态隐藏的
+       * @param target 目标元素
+       */
+      changeHintULElementWidth(target = config.$target ?? config.$inputTarget) {
+        const targetRect = target.getBoundingClientRect();
+        if (config.followTargetWidth) {
+          SearchSuggestion.$el.$dropdownWrapper.style.width = targetRect.width + "px";
+        } else {
+          SearchSuggestion.$el.$dropdownWrapper.style.width = config.width;
+        }
+      },
+      /**
+       * 动态更新CSS
+       */
+      updateDynamicCSS() {
+        const cssText = SearchSuggestion.getDynamicCSS();
+        PopsSafeUtils.setSafeHTML(SearchSuggestion.$el.$dynamicCSS, cssText);
+      },
+      /**
+       * 数据项的数量改变时调用
+       *
+       * - 更新css
+       * - 更新建议框的宽度
+       * - 更新建议框的位置
+       */
+      updateStyleSheet() {
+        // 更新z-index
+        SearchSuggestion.updateDynamicCSS();
+        // 更新宽度
+        SearchSuggestion.changeHintULElementWidth();
+        // 更新位置
+        SearchSuggestion.changeHintULElementPosition();
+      },
+      /**
+       * 添加搜索结果元素
+       * @param $item 项元素
+       */
+      addItem($item: HTMLElement | DocumentFragment) {
+        SearchSuggestion.$el.$dropdownContainer.appendChild($item);
+      },
+      /**
+       * 更新页面显示的搜索结果
+       * @param updateData
+       */
+      update(updateData: PopsSearchSuggestionData<T>[] = []) {
+        if (!Array.isArray(updateData)) {
+          throw new TypeError("传入的数据不是数组");
+        }
+        const data = updateData;
+        // 清空已有的搜索结果
+        if (data.length) {
+          SearchSuggestion.$data.isEmpty = false;
+          if (config.toHideWithNotResult) {
+            SearchSuggestion.show();
+          }
+          SearchSuggestion.clear(true);
+          // 添加进ul中
+          const fragment = document.createDocumentFragment();
+          data.forEach((item, index) => {
+            const $item = SearchSuggestion.createSearchItemLiElement(item, index);
+            SearchSuggestion.setSearchItemClickEvent($item);
+            SearchSuggestion.setSearchItemSelectEvent($item);
+            fragment.appendChild($item);
+          });
+          SearchSuggestion.addItem(fragment);
+        } else {
+          // 清空
+          SearchSuggestion.clear();
+        }
+      },
+      /**
+       * 清空当前的搜索结果并显示无结果
+       * @param [onlyClearView=false] 是否仅清空元素，默认false
+       */
+      clear(onlyClearView: boolean = false) {
+        PopsSafeUtils.setSafeHTML(SearchSuggestion.$el.$dropdownContainer, "");
+        if (onlyClearView) {
+          return;
+        }
+        SearchSuggestion.$data.isEmpty = true;
+        let $noResult;
+        if (typeof config.toSearhNotResultHTML === "string") {
+          $noResult = popsDOMUtils.parseTextToDOM(config.toSearhNotResultHTML);
+        } else {
+          $noResult = config.toSearhNotResultHTML();
+        }
+        SearchSuggestion.addItem($noResult);
+        if (config.toHideWithNotResult) {
+          SearchSuggestion.hide();
+        }
+      },
+      /**
+       * 隐藏搜索建议框
+       * @param useAnimationToHide 是否使用动画隐藏
+       */
+      hide(useAnimationToHide: boolean = false) {
+        if (config.useFoldAnimation) {
+          if (!useAnimationToHide) {
+            // 去掉动画
+            popsDOMUtils.removeClassName(SearchSuggestion.$el.root, "el-zoom-in-top-animation");
+          }
+          popsDOMUtils.addClassName(SearchSuggestion.$el.root, "el-zoom-in-top-animation");
+          popsDOMUtils.addClassName(SearchSuggestion.$el.root, "el-zoom-in-top-animation-hide");
+          popsDOMUtils.removeClassName(SearchSuggestion.$el.root, "el-zoom-in-top-animation-show");
+        } else {
+          SearchSuggestion.$el.root.style.display = "none";
+        }
+      },
+      /**
+       * 显示搜索建议框
+       */
+      show() {
+        SearchSuggestion.$el.root.style.display = "";
+        if (config.useFoldAnimation) {
+          popsDOMUtils.addClassName(SearchSuggestion.$el.root, "el-zoom-in-top-animation");
+          popsDOMUtils.removeClassName(SearchSuggestion.$el.root, "el-zoom-in-top-animation-hide");
+          popsDOMUtils.addClassName(SearchSuggestion.$el.root, "el-zoom-in-top-animation-show");
+        }
+      },
+    };
+    return SearchSuggestion;
+  },
+};