JAVASCRIPT   54

ajax search js

Guest on 13th June 2022 05:00:30 PM

  1. /**
  2.  * Ajax Dropdown Search form module
  3.  */
  4. ;
  5. ((Themify,doc)=>{
  6.     'use strict';
  7.     Themify.on('themify_overlay_search_init', el=>{
  8.             let controller,
  9.             container=el.closest('.tf_search_form');
  10.             if(!container){
  11.                 container=doc.getElementById('searchform');
  12.                                 if(!container){
  13.                                         return;
  14.                                 }
  15.                                 container=container.closest('.tf_search_form');
  16.             }
  17.           const form=container.getElementsByTagName('form')[0],
  18.             isOverlay=!!form.closest('.tf_search_overlay'),
  19.                         input=form.querySelector('input[name="s"]'),
  20.                         params=new URL(form.getAttribute('action')).searchParams,
  21.                         term=params.get('term'),
  22.                         post_type=params.get('post_type'),
  23.             cache = {},
  24.             result_wrapper=doc.createElement('div'),
  25.                         loader=doc.createElement('div'),
  26.                         request = new Headers({
  27.                                 'Accept': 'application/json',
  28.                                 'X-Requested-With': 'XMLHttpRequest'
  29.                         }),
  30.                         data = new FormData();
  31.        
  32.         result_wrapper.className='tf_search_result tf_w tf_box tf_hide';
  33.                 loader.className='tf_loader tf_hide';
  34.         if (isOverlay) {
  35.                        
  36.             container=doc.createElement('div');
  37.             const searchWrap=doc.createElement('div'),
  38.                 close=doc.createElement('a'),
  39.                 screenReader=doc.createElement('span'),
  40.                 overlayCallback = function () {
  41.                     container.classList.toggle('search-active', input.value.length > 0);
  42.                 };
  43.             el.addEventListener('click', function (e) {
  44.                 e.preventDefault();
  45.                 overlayCallback();
  46.                 container.classList.add('tf_fd_in');
  47.                 input.focus();
  48.                 Themify.body[0].style.overflowY = 'hidden';
  49.                 Themify.body[0].classList.add('searchform-slidedown');
  50.             });
  51.             close.addEventListener('click', function (e) {
  52.                 e.preventDefault();
  53.                 overlayCallback();
  54.                 if (controller) {
  55.                     controller.abort();
  56.                 }
  57.                                 controller=null;
  58.                 container.classList.remove('tf_fd_in');
  59.                 Themify.body[0].style.overflowY = '';
  60.                 Themify.body[0].classList.remove('searchform-slidedown');
  61.             });
  62.            
  63.             container.className='tf_search_lightbox tf_hide tf_w tf_box tf_opacity tf_h tf_scrollbar';
  64.             searchWrap.className='tf_searchform_inner tf_opacity';
  65.             close.className='tf_close_search tf_close';
  66.             screenReader.className='screen-reader-text';
  67.            
  68.             close.appendChild(screenReader);
  69.             container.appendChild(searchWrap);
  70.             container.appendChild(close);
  71.             form.after(container);
  72.             searchWrap.appendChild(form);
  73.         }
  74.         else{
  75.             result_wrapper.className+=' tf_scrollbar';
  76.                         result_wrapper.setAttribute('tabindex','-1');
  77.         }
  78.        
  79.         input.after(result_wrapper);
  80.                 input.before(loader);
  81.             // Tab click event
  82.             const set_tab = (target)=>{
  83.                 let href = target.getAttribute('href').replace('#', '');
  84.                 if (href === 'all') {
  85.                     href = 'item';
  86.                 }
  87.                 const li = target.closest('li'),
  88.                         all = result_wrapper.getElementsByClassName('tf_search_item');
  89.  
  90.                 for (let i = all.length - 1; i > -1; --i) {
  91.                     all[i].classList.remove('tf_fd_in');
  92.                     all[i].classList.add('tf_fd_out');
  93.                 }
  94.                 for (let tabs = li.parentNode.children, i = tabs.length - 1; i > -1; --i) {
  95.                     if ('LI' === tabs[i].tagName) {
  96.                         tabs[i].classList.remove('active');
  97.                     }
  98.                 }
  99.                 li.classList.add('active');
  100.  
  101.                 setTimeout(()=> {
  102.                     const all_b = result_wrapper.getElementsByClassName('tf_view_button'),
  103.                             item = result_wrapper.querySelector('#tf_result_link_' + href);
  104.  
  105.                     for (let i = all_b.length - 1; i > -1; --i) {
  106.                         all_b[i].classList.add('tf_hide');
  107.                     }
  108.                     if (item) {
  109.                         item.classList.remove('tf_hide');
  110.                     }
  111.                     for (let i = all.length - 1; i > -1; --i) {
  112.                         let cl = all[i].classList;
  113.                         if (cl.contains('tf_search_' + href)) {
  114.                             cl.remove('tf_hide', 'tf_fd_out');
  115.                             cl.add('tf_fd_in');
  116.                         } else {
  117.                             cl.add('tf_hide');
  118.                         }
  119.                     }
  120.                 }, 401);
  121.             },
  122.             set_active_tab = ()=> {
  123.                 let tabId=result_wrapper.querySelector('.tf_search_tab .active a');
  124.                 if (tabId) {
  125.                     tabId=tabId.getAttribute('href');
  126.                     if(tabId){
  127.                         const tab = result_wrapper.querySelector('.tf_search_tab a[href="' + tabId + '"]');
  128.                         if (tab) {
  129.                             set_tab(tab);
  130.                         }
  131.                     }
  132.                 }
  133.             };
  134.             result_wrapper.addEventListener('click', function (e) {
  135.                 const target = e.target;
  136.                 if (target.tagName === 'A' && target.closest('.tf_search_tab')) {
  137.                     e.preventDefault();
  138.                     set_tab(target);
  139.                 }
  140.             });
  141.                        
  142.                         data.append('action', 'themify_search_autocomplete');
  143.                         data.append('post_type', post_type ? post_type : '');
  144.                         if (term) {
  145.                                 data.append('term',term);
  146.                                 data.append('tax', params.get('tax'));
  147.                         }
  148.             // Search input Ajax event
  149.             input.autocomplete = 'off';
  150.             input.addEventListener('keyup', function (e) {
  151.                 setTimeout(()=>{
  152.                     const v = this.value.trim();
  153.                     if (controller) {
  154.                         controller.abort();
  155.                     }
  156.                     if (!v) {
  157.                         container.classList.remove('search-active');
  158.                         result_wrapper.innerHTML = '';
  159.                         return;
  160.                     }
  161.                                             container.classList.add('search-active');
  162.                                             if (cache[v]) {
  163.                                                     result_wrapper.innerHTML = cache[v];
  164.                                                     set_active_tab();
  165.                                                     return;
  166.                                             }
  167.                                             container.classList.add('tf_search_loading');
  168.                                             data.set('s', v);
  169.                     controller = new AbortController();
  170.                     fetch(themify_vars.ajax_url, {signal: controller.signal, method: 'POST', headers: request, body: data})
  171.                             .then(response=> {
  172.                                 return response.text();
  173.                             })
  174.                             .then(resp => {
  175.                                 if (resp) {
  176.                                     result_wrapper.innerHTML = resp;
  177.                                     set_active_tab();
  178.                                     cache[v] = resp;
  179.                                 }
  180.                             }).catch(err => {
  181.                                 if (err.name !== 'AbortError') {
  182.                                     console.error('Uh oh, an error!', err);
  183.                                 }
  184.                             }).
  185.                             finally(()=>{
  186.                                 container.classList.remove('tf_search_loading');
  187.                                 controller = null;
  188.                             });
  189.                 }, 100);
  190.             }, {passive: true});
  191.                        
  192.                         form.classList.remove('tf_hide');
  193.                         if(input.value.trim()){
  194.                                 Themify.triggerEvent(input,'keyup');
  195.                         }
  196.     });
  197. })(Themify,document);

Raw Paste

Login or Register to edit or fork this paste. It's free.