Search Box Slow

Ask the community
,
1

1ST
I have a search box (input field) with a repeater. But when I am searching, it takes too much time to show. Here are the code snippets.
2ND
Redirect from one page to another is too slow though I’m using my broadband.
Webpage:https://www.useus24.org
Note: If I Search “Air” then Air Conditioner will show in the repeater.
Then if I click on “Air Conditioner” it will redirect me from the “Home” page to the “AC” page
This redirect is slow.

1306×300 7.75 KB

REFERENCE: https://www.grampsworkbench.com/Examples/Repeater-Dropdown

import wixAnimations from 'wix-animations';
import wixData from 'wix-data';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';

let listSize;
let currIndex = -1;
var links = ["/ac","/electricians","/plumbers","/BEAUTICIANS","/GST","/loan","/CAR","/PC","/WEBSITE","/CCTV","/EVENTS"];

$w.onReady(function () {

  setTimeout(()=>{$w('#iptService').expand();$w('#btnDelhi').expand()},1000);

/////////Services Input Box Start/////////
  $w('#iptService').onKeyPress((event) => {
    setTimeout(() => {
 if ($w('#iptService').value.length === 0) {
        currIndex = -1;
        $w("#rptDropdown").collapse()
      } else {

 switch (event.key) {
 case "Enter":
          $w('#iptService').value = $w('#rptDropdown').data[currIndex].title;
          $w("#rptDropdown").collapse()
 break;
 case "ArrowLeft":
 case "ArrowRight":
 break;
 case "ArrowUp":
 if (currIndex > 0) {
            currIndex -= 1;
            refresh_repeater();
          }
 break;
 case "ArrowDown":
 if (currIndex < listSize - 1) {
            currIndex += 1;
            refresh_repeater();
          }
 break;
 case "Escape":
          $w('#iptService').value = '';
          currIndex = -1;
          $w("#rptDropdown").collapse()
 break;
 default:
          currIndex = -1;
          wixData.query("SearchServices")
            .startsWith("title", $w('#iptService').value)
            .ascending("title")
            .limit(5)
            .find()
            .then((res) => {
              $w('#rptDropdown').data = [];
              $w('#rptDropdown').data = res.items;
              listSize = res.items.length;
              $w('#rptDropdown').expand();
            });
 break;
        }
      }
    }, 10);
    $w('#name').expand();
  });////////////Services Input Box End///////////

if(wixWindow.formFactor === "Desktop"){
  $w('#box13').collapse();
  $w('#box14').collapse();
  $w('#box15').collapse();
  $w('#box16').collapse();
  $w('#box17').collapse();
  $w('#box18').collapse();
  $w('#box22').collapse();
  $w('#ratingKotak').collapse();

  $w('#box23').collapse();
  $w('#box24').collapse();
  $w('#box25').collapse();
  $w('#box26').collapse();
  $w('#box27').collapse();
  $w('#box28').collapse();

  $w('#box32').collapse();
  $w('#vectorImage19').collapse();
  $w('#text7').collapse();

  $w('#box33').collapse();
  $w('#vectorImage20').collapse();
  $w('#text8').collapse();
  $w('#text9').collapse();
  $w('#btnArrow').collapse();

  $w('#line1').collapse();
 
  $w('#text18').collapse();
  $w('#text19').collapse();
  $w('#text20').collapse();
  $w('#text21').collapse();
  $w('#text22').collapse();

  $w('#vectorImage31').collapse();
  $w('#vectorImage32').collapse();
  $w('#vectorImage33').collapse();
  $w('#vectorImage34').collapse();

 

}

//var call = `<p style="color:#323232;">${$w("#txtAc").text}</p>`;

if(wixWindow.formFactor === "Mobile"){
  $w('#stripOne').collapse();
  $w('#btnDelhi').collapse();
  $w('#serviceCont').collapse();
 // $w('#box1').collapse();
  $w('#box2').collapse();
  $w('#box3').collapse();
  $w('#box4').collapse();
 // $w('#box5').collapse();
  $w('#box6').collapse();
 // $w('#box7').collapse();
  $w('#box8').collapse();
  $w('#box9').collapse();
  $w('#box10').collapse();
  $w('#box11').collapse();
 // $w('#box12').collapse();
  $w('#box19').collapse();
  $w('#box21').collapse();
  $w('#vectorImage15').collapse();
  $w('#txthdfc').collapse();

  $w('#stripThree').collapse();
  $w('#box35').collapse();
  $w('#text12').collapse();
  $w('#vectorImage22').collapse();
  $w('#vectorImage23').collapse();
  $w('#vectorImage24').collapse();
  $w('#vectorImage25').collapse();
  $w('#image1').collapse();

 // $w('#box13').expand();
 // $w('#box14').expand();
 // $w('#box15').expand();
 // $w('#box16').expand();
 // $w('#box17').expand();
 // $w('#box18').expand();
 // $w('#box22').expand();
 // $w('#ratingKotak').expand();

 // $w('#box23').expand();
 // $w('#box24').expand()
 // $w('#box25').expand()
 // $w('#box26').expand()
 // $w('#box27').expand()
 // $w('#box28').expand()

 // $w('#box32').expand();
 // $w('#vectorImage19').expand();
 // $w('#text7').expand();

 // $w('#box33').expand();
 // $w('#vectorImage20').expand();
 // $w('#text8').expand();
 // $w('#btnArrow').expand();

 // $w('#line1').expand();
 

 $w("#txtAc").html = `<p style="color:#323232;">${$w("#txtAc").text}</p>`;
 $w("#txtElec").html = `<p style="color:#323232;">${$w("#txtElec").text}</p>`;
 $w("#txtPlumber").html = `<p style="color:#323232;">${$w("#txtPlumber").text}</p>`;
 $w("#txtBeauty").html = `<p style="color:#323232;">${$w("#txtBeauty").text}</p>`;
 $w("#txtLoan").html = `<p style="color:#323232;">${$w("#txtLoan").text}</p>`;
 $w("#txtCa").html = `<p style="color:#323232;">${$w("#txtCa").text}</p>`;

 $w("#txtCarRep").html = `<p style="color:#323232;">${$w("#txtCarRep").text}</p>`;
 $w("#txtPc").html = `<p style="color:#323232;">${$w("#txtPc").text}</p>`;
 $w("#txtCctv").html = `<p style="color:#323232;">${$w("#txtCctv").text}</p>`;
 $w("#txtCarRen").html = `<p style="color:#323232;">${$w("#txtCarRen").text}</p>`;
 $w("#txtWeb").html = `<p style="color:#323232;">${$w("#txtWeb").text}</p>`;
 $w("#txtEvent").html = `<p style="color:#323232;">${$w("#txtEvent").text}</p>`;
 

$w("#txtKotak").html = `<p style="text-align:left;">${$w("#txtKotak").text}</p>`;

$w('#box29').style.backgroundColor="rgb(122,220,207)";
$w('#box30').style.backgroundColor="rgb(247,197,159)";
$w('#box31').style.backgroundColor="rgb(247,197,159)";
$w('#box32').style.backgroundColor="rgb(122,220,207)";
// $w('#box34').style.backgroundColor="rgb(39,97,207)";
$w('#box34').style.backgroundColor="#FFFFFF";

}

});

//////////Service Input Box start/////////////
export function rptDropdown_itemReady($item, itemData, index) {
  $item('#name').text = itemData.title;

 

  $item('#container1').onClick(() => {
    $w('#iptService').value = itemData.title;
    $w('#rptDropdown').collapse();
    $w('#name').expand();
    serviceUrl();
  });
}

function refresh_repeater() {
  $w("#rptDropdown").forEachItem(($item, itemData, index) => {
    $item('#name').text = itemData.title;

    $item('#container1').onClick(() => {
      $w('#iptService').value = itemData.title;
      $w('#rptDropdown').collapse();
      $w('#name').expand();
      serviceUrl();
    });
  });
}

// Searcbox url redirect
function serviceUrl () {
 if (($w("#iptService").value==="Air Conditioner")) {
        wixLocation.to(links[0]);
    }else if(($w("#iptService").value==="Plumbers")){
            wixLocation.to(links[5]);
    }
}

//Service Input Box
export function iptService_keyPress(event) {
  setTimeout(btnReset,20);
}

function btnReset  () {
 if ($w('#iptService').value==='') {
    $w('#btnReset').collapse();
  }else{
    $w('#btnReset').expand();
  }
}

export function btnReset_click(event) {
  $w('#iptService').value = "";
  $w('#iptService').resetValidityIndication();
  $w('#rptDropdown').collapse();
  $w('#btnReset').collapse();
 
}
////////////////Service Input Box End////////////////

export function txtAc_click(event) {
   wixLocation.to(links[0]);
}

Database Pic (Have only “Title” field)

1144×726 44.1 KB

Thanks and Regards,
Nirmal Maity