https://www.mygica.com/wp-content/themes/Mygica/elementor-widgets/…/download-search-widget.js?ver=1.0.0

1/**
2 * Mygica Download Search Widget JavaScript
3 * 下载搜索框小部件脚本 - 实现AJAX搜索功能
4 */
5
6(function($) {
7    'use strict';
8
9    class GentiatechDownloadSearch {
10        constructor(element) {
11            this.wrapper = $(element);
12            this.input = this.wrapper.find('.mygica-download-search-input');
13            this.button = this.wrapper.find('.mygica-download-search-button');
14            this.clearBtn = this.wrapper.find('.mygica-download-search-clear');
15            this.status = this.wrapper.find('.mygica-download-search-status');
16            this.loadingText = this.wrapper.find('.mygica-download-search-loading');
17            
18            // 获取设置
19            this.settings = this.getSettings();
20            
21            // 搜索相关变量
22            this.searchTimeout = null;
23            this.isSearching = false;
24            
25            // 初始化
26            this.init();
27        }
28
29        getSettings() {
30            const input = this.input;
31            return {
32                target: input.data('target') || '.mygica-download-center',
33                liveSearch: input.data('live-search') === 'yes',
34                searchDelay: parseInt(input.data('search-delay')) || 300,
35                minLength: parseInt(input.data('min-length')) || 2,
36                searchFields: (input.data('search-fields') || 'title,content,category').split(','),
37                noResultsMessage: input.data('no-results') || 'No downloads found matching your search.',
38                loadingText: input.data('loading-text') || 'Searching...',
39                showCount: input.data('show-count') === 'yes'
40            };
41        }
42
43        init() {
44            this.bindEvents();
45            this.loadSearchFromUrl();
46            this.updateClearButton();
47        }
48
49        loadSearchFromUrl() {
50            // 从URL参数中读取搜索关键词
51            const urlParams = new URLSearchParams(window.location.search);
52            const searchQuery = urlParams.get('download_search');
53            
54            if (searchQuery) {
55                this.input.val(searchQuery);
56                this.updateClearButton();
57                
58                // 显示搜索状态
59                if (this.settings.showCount) {
60                    this.showStatus(`Searching for "${searchQuery}"`, 'success');
61                }
62            }
63        }
64
65        bindEvents() {
66            // 输入事件
67            this.input.on('input', (e) => {
68                this.handleInput(e);
69            });
70
71            // 键盘事件
72            this.input.on('keydown', (e) => {
73                if (e.key === 'Enter') {
74                    e.preventDefault();
75                    this.performSearch();
76                } else if (e.key === 'Escape') {
77                    this.clearSearch();
78                }
79            });
80
81            // 搜索按钮点击
82            this.button.on('click', (e) => {
83                e.preventDefault();
84                this.performSearch();
85            });
86
87            // 清除按钮点击
88            this.clearBtn.on('click', (e) => {
89                e.preventDefault();
90                this.clearSearch();
91            });
92
93            // 表单提交
94            this.wrapper.find('.mygica-download-search-form').on('submit', (e) => {
95                e.preventDefault();
96                this.performSearch();
97            });
98        }
99
100        handleInput(e) {
101            const query = e.target.value.trim();
102            
103            // 更新清除按钮显示状态
104            this.updateClearButton();
105
106            // 对于GET方式搜索，不启用实时搜索
107            // 用户需要按Enter或点击搜索按钮来执行搜索
108        }
109
110        updateClearButton() {
111            const hasValue = this.input.val().trim().length > 0;
112            this.clearBtn.toggle(hasValue);
113        }
114
115        performSearch(query = null) {
116            if (query === null) {
117                query = this.input.val().trim();
118            }
119
120            // 如果查询长度不足，不执行搜索
121            if (query.length < this.settings.minLength) {
122                if (query.length === 0) {
123                    this.resetSearch();
124                }
125                return;
126            }
127
128            // 通过GET方式搜索 - 修改URL参数并刷新页面
129            this.searchByUrl(query);
130        }
131
132        searchByUrl(query) {
133            // 获取当前URL
134            const currentUrl = new URL(window.location.href);
135            
136            // 设置搜索参数
137            if (query && query.trim() !== '') {
138                currentUrl.searchParams.set('download_search', query.trim());
139            } else {
140                currentUrl.searchParams.delete('download_search');
141            }
142            
143            // 跳转到新URL
144            window.location.href = currentUrl.toString();
145        }
146
147        getTargetElement() {
148            let target;
149            
150            if (this.settings.target) {
151                target = $(this.settings.target);
152            } else {
153                target = $('.mygica-download-center').first();
154            }
155            
156            return target;
157        }
158
159        resetSearch() {
160            // 通过URL方式重置搜索 - 移除搜索参数
161            this.searchByUrl('');
162        }
163
164        clearSearch() {
165            // 清除输入框
166            this.input.val('').focus();
167            
168            // 更新清除按钮
169            this.updateClearButton();
170            
171            // 重置搜索结果
172            this.resetSearch();
173            
174            // 清除定时器
175            if (this.searchTimeout) {
176                clearTimeout(this.searchTimeout);
177                this.searchTimeout = null;
178            }
179            
180            // 触发自定义事件
181            this.wrapper.trigger('mygica:search:clear');
182        }
183

184        setLoadingState(loading) {
185            // GET方式搜索不需要加载状态，因为会跳转页面
186            this.isSearching = loading;
187        }
188
189        showStatus(message, type = 'info') {
190            this.status.removeClass('success error loading').addClass(type);
191            this.loadingText.text(message);
192            this.status.show();
193            
194            // 自动隐藏非加载状态的消息
195            if (type !== 'loading') {
196                setTimeout(() => {
197                    this.hideStatus();
198                }, 3000);
199            }
200        }
201
202        hideStatus() {
203            this.status.hide();
204        }
205
206        // 公共API方法
207        search(query) {
208            this.input.val(query);
209            this.updateClearButton();
210            this.performSearch(query);
211        }
212
213        clear() {
214            this.clearSearch();
215        }
216
217        destroy() {
218            // 清理事件和定时器
219            if (this.searchTimeout) {
220                clearTimeout(this.searchTimeout);
221            }
222            
223            this.wrapper.off();
224            this.wrapper.removeData('mygica-search');
225        }
226    }
227
228    // jQuery插件
229    $.fn.gentiatechDownloadSearch = function(options) {
230        return this.each(function() {
231            const $this = $(this);
232            let instance = $this.data('mygica-search');
233            
234            if (!instance) {
235                instance = new GentiatechDownloadSearch(this);
236                $this.data('mygica-search', instance);
237            }
238            
239            // 如果传入了方法名，调用对应方法
240            if (typeof options === 'string' && instance[options]) {
241                return instance[options].apply(instance, Array.prototype.slice.call(arguments, 1));
242            }
243        });
244    };
245
246    // 自动初始化
247    $(document).ready(function() {
248        $('.mygica-download-search-wrapper').gentiatechDownloadSearch();
249    });
250
251    // Elementor前端初始化
252    $(window).on('elementor/frontend/init', function() {
253        elementorFrontend.hooks.addAction('frontend/element_ready/mygica_download_search.default', function($scope) {
254            $scope.find('.mygica-download-search-wrapper').gentiatechDownloadSearch();
255        });
256    });
257
258    // 导出到全局作用域（用于调试）
259    window.GentiatechDownloadSearch = GentiatechDownloadSearch;
260
261})(jQuery);