https://www.goodwaytechs.com/assets/js/unit/faq-text-search.js

1class ScriptFaqTextSearch extends Script {
2  constructor(params) {
3    super(params)
4    this.attrId = params.attrId
5    this.$unit = document.querySelector(`#${this.attrId}`)
6    this.$allInput = this.$unit.querySelectorAll(`.unit-faq-text-search__items .faq-text-input`)
7    this.$searchBtn = this.$unit.querySelectorAll(`.unit-faq-text-search__items .faq-text-input-btnSearch`)
8	  this.$close = this.$unit.querySelectorAll(`.unit-faq-text-search__items .faq-text-search-close`)
9    this.pageInfo = JSON.parse(decodeURIComponent(params.pageInfo || '{}'))
10  }
11
12  async init() {
13    this.initListeners()
14  }
15  /**
16   *
17   */
18  initListeners() {
19    for (let $el of this.$searchBtn) {
20      const handleClick = (e) => {
21        e.stopPropagation()
22        e.preventDefault()
23        this.searchData($el.parentNode.querySelector('.faq-text-input').value)
24      }
25      if (this.utilts.checkDesign()) {
26        if (typeof $el.removeMyEvent === 'function') $el.removeMyEvent()
27        $el.removeMyEvent = () => $el.removeEventListener('click', handleClick)
28      }
29      $el.addEventListener('click', handleClick)
30    }
31    for (let $el of this.$allInput) {
32      const handleInput = (e) => {
33        e.stopPropagation()
34        e.preventDefault()
35        if(e.target.value!=''){
36          $el.parentNode.querySelector('.faq-text-search-close').style.display = 'block';
37        }else{
38          $el.parentNode.querySelector('.faq-text-search-close').style.display = 'none';
39        }
40      }
41      const handleKeydown = (event) => {
42        event = event || window.event;
43        event.stopPropagation()
44        if (event.keyCode === 13) this.searchData($el.value)
45      }
46      if (this.utilts.checkDesign()) {
47        if (typeof $el.removeMyEvent === 'function') $el.removeMyEvent()
48        $el.removeMyEvent = () => {
49          $el.removeEventListener('input', handleInput)
50          $el.removeEventListener('keydown', handleKeydown)
51        }
52      }
53      $el.addEventListener('input', handleInput)
54      $el.addEventListener('keydown', handleKeydown)
55    }
56    for (let $el of this.$close) {
57      const handleClick = (e) => {
58        e.stopPropagation()
59        e.preventDefault()
60        $el.style.display = 'none';
61        $el.parentNode.querySelector('.faq-text-input').value = ''
62        this.searchData($el.parentNode.querySelector('.faq-text-input').value)
63      }
64      if (this.utilts.checkDesign()) {
65        if (typeof $el.removeMyEvent === 'function') $el.removeMyEvent()
66        $el.removeMyEvent = () => $el.removeEventListener('click', handleClick)
67      }
68      $el.addEventListener('click', handleClick)
69    }
70
71  }
72  /** 
73   * 获取产品属性参数
74   */
75  searchData(keyword) {
76		window.app.info.pagination.page_number = 1
77    window.app.info.renderFAQList({
78			keyword,
79			page_number: window.app.info.pagination.page_number,
80      page_size: this.pageInfo.page_size,
81      faq_type_id: window.app.info.faq_type_id,
82      page_category_id: window.app.info.page.page_category_id,
83		})
84	}
85}