@shahbaz61/searchbox-corejs v1.0.2

Javascript component for faster and simpler integration for Zir-AI in web development.

For full :page_facing_up: documentation, visit the online documentation.

The perfect starting point to integrate Zir-Ai Semantic search within your Core js project

:bulb: Getting Started

to install Zir-Ai Core js package for semantic search

npm install @zir-ai/searchbox-corejs

Then, add @zir-ai/searchbox-corejs library in you project

    <script>
      zirSearch.initializeZirSearch(
        "zqt_cKg6-joMkEsOa1EbNS-MQefDdC3I7Ct_g3tr2Q", // api key
        1890073338, // customer id
        [148, 157, 160], // array of corpus id's
        success, // success function
        error, // error function
        "./download.png", // custom icon
        20, // number of results
        "Enter what you want to ask about", // search palceholder
        false // focus searchbox
      );
      let widget = zirSearch.createSearch();
      document.getElementById("anchor").appendChild(widget);

      function success(results) {
        console.log(results);
      }

      function error(err) {
        console.log(err);
      }
    </script>

lets discuss the above:

createSearch

zirSearch.createSearch() function which returns styled input search box which you can append anywhere in your website

apikey

apikey is your key which is linked with your single or multiple corpus. it's mandatory to pass apikey

customerID

it is your account ID which need to be passed to the initializeZirSearch component

corpusID

Basically it takes array of corpus id's which means on which corpus you want to make search

success

pass success function to initializeZirSearch, it will give back results when the request is resolved

Optional Parameters

error

as above its error function which you can pass to initializeZirSearch, it will give back results when the request is resolved

custom icon

by default Zir-AI icon will be shown in searchbox, you can replace icon by passing your icon refrence

number of results

By default number of results is 10, so which can be changed by passing any value

palceholder

If want to change placeholder, pass text string and palceholder will be changed

focus

By default its false, but if set true the search box will be focused on every first load

submitFn

query from outside of the serach box is possible through zirSearch.submitFn(query) method, after initializeZirSearch its possible to call zirSearch.submitFn(query) with one parameter which will be query text to make search

    <script>
      zirSearch.initializeZirSearch(...);
      let widget = zirSearch.createSearch();
      document.getElementById("anchor").appendChild(widget);

      function success(results) {...}

      function error(err) {...}

      let txt;
      const questions = ["are you there", "what are you doing"];

      questions.forEach((q, index) => {
        txt += `<li id="list-${index}">`;
        txt += q;
        txt += "</li>";
      });

      document.getElementById("list").innerHTML = txt;

      questions.forEach((q, index) => {
        const el = document.getElementById(`list-${index}`);
        if (el !== null) {
          el.addEventListener("click", () => {
            zirSearch.submitFn(el.innerHTML);
          });
        }
      });
    </script>