Arranging Words in Search Boxes Through JavaScript

Question

Arranging Words in Search Boxes Through JavaScript

Inquiry. As a beginner in VueJS and JavaScript, I am currently working on setting up a search bar. While it functions properly, I am facing a challenge. I wish to enable the search functionality to look through an object's description even if the input words are not in the correct sequence.

Illustration. For instance, if the description string is "Gucci blue belt" and I type "Gucci blue" in the search bar, the result displays as expected since the description contains the words in that order. I aim to implement a feature where typing "Gucci belt" will also show the item with the description "Gucci blue belt."

The current computed code in VueJS section

filteredsortedobjects (){
    return this.sortedobjects.filter(object => {
        var Objectslist_n = object.name;
        var Objectslist_q = object.quantity;
        var Objectslist_c = object.category;
        var Objectslist_s = object.section;
        var Objectslist_d = object.description;
        var Objectslist_date = object.reception_date;
        var Input = this.searchQuery;

        /* Create arrays with all information in the table */

        var Objectslist_nq = Objectslist_n.concat(Objectslist_q);
        var Objectslist_nqc = Objectslist_nq.concat(Objectslist_c);
        var Objectslist_nqcs = Objectslist_nqc.concat(Objectslist_s);
        var Objectslist_nqcsd = Objectslist_nqcs.concat(Objectslist_d);
        var Objectslist_nqcsddate = Objectslist_nqcsd.concat(Objectslist_date);

        /* Filtered variables */

        var F_Objectslist = RemoveAccents(Objectslist_nqcsddate.toLowerCase());
        var F_Input = RemoveAccents(this.searchQuery.toLowerCase());

        /* Function to remove accents */

        function RemoveAccents(str) {
            var accents = 'ÀÁÂÃÄÅàáâãäåÒÓÔÕÕÖØòóôõöøÈÉÊËèéêëðÇçÐÌÍÎÏìíîïÙÚÛÜùúûüÑñŠšŸÿýŽž';
            var accentsOut = "AAAAAAaaaaaaOOOOOOOooooooEEEEeeeeeCcDIIIIiiiiUUUUuuuuNnSsYyyZz";
            str = str.split('');
            var strLen = str.length;
            var i, x;
            for (i = 0; i < strLen; i++) {
                if ((x = accents.indexOf(str[i])) != -1) {
                    str[i] = accentsOut[x];
                }
            }
            return str.join('');
        };
        console.log(F_Objectslist);
        console.log(F_Input);
        return F_Objectslist.includes(F_Input)
    })
}

I acknowledge that the accent removal function has not been implemented while conducting tests.

Attempted Approach. To address this concern, I have attempted converting variable F_Input (search bar input) and F_Objectslist (an array containing all item details such as names, categories, sections, quantities, descriptions, and dates) into strings using array.split(" "). This resulted in arrays of strings ["word", "word2", ...] for both variables in the console.

At this stage, I am uncertain about how to verify if the strings within my F_Input array exist in the F_Objectslist array regardless of their order.

Thank you for your assistance!

javascript vue.js

Answer 1

Answer №1

To begin, separate the F_Input variable by spaces and then utilize 'Array.prototype.map()' to iterate through the array of search terms in F_Input using the current approach.

It's important to note that all these actions are linked together with a final invocation of the .every() method. The last step ensures that every search operation (via map) must yield a true result (or an array filled entirely with the value true);

const F_Objectslist = "this is search term, and this is term search".split(' ');
const F_Input = "search term";

let result = search(F_Objectslist, F_Input);
console.log(result);

let notFoundResult = search(F_Objectslist, "search dog");
console.log(notFoundResult);

function search(text, terms) {
  return terms.split(' ').map(term =>text.includes(term)).every(found=>found===true);
}

Answer 2

To begin, separate the F_Input variable by spaces and then utilize 'Array.prototype.map()' to iterate through the array of search terms in F_Input using the current approach.

It's important to note that all these actions are linked together with a final invocation of the .every() method. The last step ensures that every search operation (via map) must yield a true result (or an array filled entirely with the value true);

const F_Objectslist = "this is search term, and this is term search".split(' ');
const F_Input = "search term";

let result = search(F_Objectslist, F_Input);
console.log(result);

let notFoundResult = search(F_Objectslist, "search dog");
console.log(notFoundResult);

function search(text, terms) {
  return terms.split(' ').map(term =>text.includes(term)).every(found=>found===true);
}

Answer 3

Answer №2

In my opinion, you were almost there with your approach. Here's how I would tackle it:

function searchForMatch(input, match) {
  let isMatch = true;

  const matchArray = match.split(' ');
  const inputArray = input.split(' ');

  inputArray.forEach(word => {
    if (matchArray.indexOf(word) === -1) {
        isMatch = false;
    }
  });

  return isMatch;
}

You can test the functionality in this working fiddle

Answer 4

In my opinion, you were almost there with your approach. Here's how I would tackle it:

function searchForMatch(input, match) {
  let isMatch = true;

  const matchArray = match.split(' ');
  const inputArray = input.split(' ');

  inputArray.forEach(word => {
    if (matchArray.indexOf(word) === -1) {
        isMatch = false;
    }
  });

  return isMatch;
}

You can test the functionality in this working fiddle

Answer 5

Answer №3

Here is the answer I came up with.

I successfully created a highly responsive search bar that can search for information within an array! For those interested, here is the code!

Inside page.vue under computed

 filteredsortedobjects (){
    return this.sortedobjects.filter(object => {
      var Objectslist_n = "a" + object.name;
      var Objectslist_c = object.category;
      var Objectslist_s = object.section;
      var Objectslist_q = object.quantity;
      var Objectslist_d = object.description;
      var Objectslist_date = object.reception_date;
      var Input = this.searchQuery;

      /* Form arrays with all table information */

      var Objectslist_nc = Objectslist_n + " " + Objectslist_c;
      var Objectslist_ncs = Objectslist_nc + " " + Objectslist_s;
      var Objectslist_ncsq = Objectslist_ncs + " " + Objectslist_q;
      var Objectslist_ncsqd = Objectslist_ncsq + " " + Objectslist_d;
      var Objectslist_ncsqddate = Objectslist_ncsqd + " " + Objectslist_date;

      /* Filtered variables */

      var F_Objectslist = RemoveAccents(Objectslist_ncsqddate.toLowerCase()).split(" ") + " ";
      var F_Input = RemoveAccents(this.searchQuery.toLowerCase()).split(" ");

      /* Function to remove accents */

      function RemoveAccents(str) {
        var accents    = 'ÀÁÂÃÄÅàáâãäåÒÓÔÕÕÖØòóôõöøÈÉÊËèéêëðÇçÐÌÍÎÏìíîïÙÚÛÜùúûüÑñŠšŸÿýŽž';
        var accentsOut = "AAAAAAaaaaaaOOOOOOOooooooEEEEeeeeeCcDIIIIiiiiUUUUuuuuNnSsYyyZz";
        str = str.split('');
        var strLen = str.length;
        var i, x;
        for (i = 0; i < strLen; i++) {
          if ((x = accents.indexOf(str[i])) != -1) {
            str[i] = accentsOut[x];
          }
        }
        return str.join('');
      };

      return F_Input.every(object => {
          if (F_Objectslist.indexOf(object) === -1) {
          }
          else {
            return F_Objectslist.indexOf(object)
          }
      })

    })
  }

I have included an input with the attribute v-model="searchQuery". Also, there is a table that displays

   <tr id="tr" v-for="object in filteredsortedobjects" v-bind:key="object.name">
    <td>
      <p>{{ object.name }}</p>
    </td>
    <td>
      <p>{{ object.category }}</p>
    </td>
    <td>
      <p>{{ object.section }}</p>
    </td>
    <td>
      <p>{{ object.quantity }}</p>
    </td>
    <td>
      <p>{{ object.description }}</p>
    </td>
    <td>
      <p>{{ object.reception_date }}</p>
    </td>
  </tr>

The object.something are imported from a JSON file using

<script>
import objects from "./Database/Objects.json";
</script>

You may need to set some data information in the data() section

searchQuery: ""

Answer 6

Here is the answer I came up with.

I successfully created a highly responsive search bar that can search for information within an array! For those interested, here is the code!

Inside page.vue under computed

 filteredsortedobjects (){
    return this.sortedobjects.filter(object => {
      var Objectslist_n = "a" + object.name;
      var Objectslist_c = object.category;
      var Objectslist_s = object.section;
      var Objectslist_q = object.quantity;
      var Objectslist_d = object.description;
      var Objectslist_date = object.reception_date;
      var Input = this.searchQuery;

      /* Form arrays with all table information */

      var Objectslist_nc = Objectslist_n + " " + Objectslist_c;
      var Objectslist_ncs = Objectslist_nc + " " + Objectslist_s;
      var Objectslist_ncsq = Objectslist_ncs + " " + Objectslist_q;
      var Objectslist_ncsqd = Objectslist_ncsq + " " + Objectslist_d;
      var Objectslist_ncsqddate = Objectslist_ncsqd + " " + Objectslist_date;

      /* Filtered variables */

      var F_Objectslist = RemoveAccents(Objectslist_ncsqddate.toLowerCase()).split(" ") + " ";
      var F_Input = RemoveAccents(this.searchQuery.toLowerCase()).split(" ");

      /* Function to remove accents */

      function RemoveAccents(str) {
        var accents    = 'ÀÁÂÃÄÅàáâãäåÒÓÔÕÕÖØòóôõöøÈÉÊËèéêëðÇçÐÌÍÎÏìíîïÙÚÛÜùúûüÑñŠšŸÿýŽž';
        var accentsOut = "AAAAAAaaaaaaOOOOOOOooooooEEEEeeeeeCcDIIIIiiiiUUUUuuuuNnSsYyyZz";
        str = str.split('');
        var strLen = str.length;
        var i, x;
        for (i = 0; i < strLen; i++) {
          if ((x = accents.indexOf(str[i])) != -1) {
            str[i] = accentsOut[x];
          }
        }
        return str.join('');
      };

      return F_Input.every(object => {
          if (F_Objectslist.indexOf(object) === -1) {
          }
          else {
            return F_Objectslist.indexOf(object)
          }
      })

    })
  }

I have included an input with the attribute v-model="searchQuery". Also, there is a table that displays

   <tr id="tr" v-for="object in filteredsortedobjects" v-bind:key="object.name">
    <td>
      <p>{{ object.name }}</p>
    </td>
    <td>
      <p>{{ object.category }}</p>
    </td>
    <td>
      <p>{{ object.section }}</p>
    </td>
    <td>
      <p>{{ object.quantity }}</p>
    </td>
    <td>
      <p>{{ object.description }}</p>
    </td>
    <td>
      <p>{{ object.reception_date }}</p>
    </td>
  </tr>

The object.something are imported from a JSON file using

<script>
import objects from "./Database/Objects.json";
</script>

You may need to set some data information in the data() section

searchQuery: ""

Arranging Words in Search Boxes Through JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to use a variable for the value attribute in a select option?

What is the best way to utilize AJAX for extracting all the "name" values from my JSON data?

Dynamic header that adjusts to fit window size fluctuations

Extracting information from a database (HTML, JavaScript)

`Unable to retrieve Shopify products using shopify-api-node`

Identifying the selected element within a THREE.js object

The differences between using the opacity attribute in HTML and the opacity property

Guide on retrieving POST data in sveltekit

Transferring a variety of outcomes back from PHP using AJAX

Discovering the following element containing an ID attribute with jQuery

Steps for creating an effective page preloader

Conceal the object, while revealing a void in its place

The function res.render is not displaying the new page

Switching between three div elements along with two icons can be done by using toggle functionality

Is there a way to fix the issue of ContextMenu not appearing at the right position within a scrollable

Form with a dropdown menu and a button to duplicate the dropdown menu

Ways to add a CSS class to an ID that immediately follows

Unlock maximum screen viewing on your custom video player with these steps to activate fullscreen

Dispatch an email without pausing for the task to complete its execution

Oops! The API request was denied with error code 401 - Unauthorized in React