CODEWITHSUNDEEP
reactjs
erics15
erics15

Reputation: 627

Autocomplete with suggestions from JSON object in React

I'm having a tough time trying to figure this out. The task is to perform a search in the search bar and while searching, have the items come up with autocompleting the search if there's a match ( the item, the price, etc). I got it to loop through the JSON but can't seem to figure out how to get the results. Thanks for any help you can provide. I am new to React and trying to learn it.

Below is my code.

 import React from 'react';
 import data from '../../../server/data';


 class Menu extends React.Component {


 constructor() {
    super();
    this.state = {
        showingSearch: false,
        data
    };
}

/**
 * Shows or hides the search container
 * @memberof Menu
 * @param e [Object] - the event from a click handler
 */
showSearchContainer(e) {
    e.preventDefault();
    this.setState({
        showingSearch: !this.state.showingSearch,
        query:'',
        data:[]
    });
}

/**
 * Calls upon search change
 * @memberof Menu
 * @param e [Object] - the event from a text change handler
 */
onSearch(e) {
    const {value} = e.target;
    this.setState({
      query:value
    });
    // console.log(value);
    // this.search(value);
    // Start Here
    // ...
  }



/**
 * Renders the default app in the window, we have assigned this to an element called root.
 *
 * @returns JSX
 * @memberof App
*/
render() {
  const { data, query } = this.state;
  const filteredData = !query
    ? data
    : data
  .filter(product =>
    product.name.toLowerCase().includes(query.toLowerCase())
  )
  .map((product, index) => {
    return <span> {product.price} </span>;
  });
    return (

        <header className="menu">
            <div className="menu-container">
                <div className="menu-holder">
                    <h1>ELC</h1>
                    <nav>
                        <a href="#" className="nav-item">ITEMS</a>
                        <a href="#" className="nav-item">PROCESS</a>
                        <a href="#" className="nav-item">PRODUCTS</a>
                        <a href="#" className="nav-item">BESTSELLERS</a>
                        <a href="#" className="nav-item">GOODBYES</a>
                        <a href="#" className="nav-item">LOCATIONS</a>
                        <a href="#" className="nav-item">INSPIRATION</a>

                        <a href="#" onClick={(e) => this.showSearchContainer(e)}>
                            <i className="material-icons search">search</i>
                            <div>
                                {filteredData.map((product, index) => (
                                  <span> {product.price} </span>
                                ))}
                              </div>
                              </a>
                    </nav>
                </div>
            </div>
            <div className={(this.state.showingSearch ? "showing " : "") + "search-container"}>
                <input type="text" onChange={(e) => this.onSearch(e)} />
                <a href="#" onClick={(e) => this.showSearchContainer(e)}>
                    <i className="material-icons close">close</i>
                </a>

            </div>
        </header>
    );
 }
}

module.exports = Menu;

Here is the data 
var data = [
{
    "_id": "001",
    "isActive": "true",
    "price": "20.00",
    "picture": "/img/products/N0CA_430.png",
    "name": "Damage Reverse Oil Conditioner",
    "about": "Dolor voluptate velit consequat duis. Aute ad officia fugiat esse anim exercitation voluptate excepteur pariatur sit culpa duis qui esse. Labore amet ad eu veniam nostrud minim labore aliquip est sint voluptate nostrud reprehenderit. Ipsum nostrud culpa consequat reprehenderit.",
    "tags": [
        "ojon",
        "oil",
        "conditioner"
    ]
},
{
    "_id": "002",
    "isActive": "true",
    "price": "22.00",
    "picture": "/img/products/N0EN01_430.png",
    "name": "Volume Advance Conditioner",
    "about": "Dolor voluptate velit consequat duis. Aute ad officia fugiat esse anim exercitation voluptate excepteur pariatur sit culpa duis qui esse. Labore amet ad eu veniam nostrud minim labore aliquip est sint voluptate nostrud reprehenderit. Ipsum nostrud culpa consequat reprehenderit.",
    "tags": [
        "ojon",
        "conditioner"
    ]
},
{
    "_id": "003",
    "isActive": "true",
    "price": "30.00",
    "picture": "/img/products/N0EY01_430.png",
    "name": "Volume Advance Shampoo",
    "about": "Dolor voluptate velit consequat duis. Aute ad officia fugiat esse anim exercitation voluptate excepteur pariatur sit culpa duis qui esse. Labore amet ad eu veniam nostrud minim labore aliquip est sint voluptate nostrud reprehenderit. Ipsum nostrud culpa consequat reprehenderit.",
    "tags": [
        "ojon",
        "shampoo"
    ]
},
{
    "_id": "004",
    "isActive": "true",
    "price": "20.00",
    "picture": "/img/products/N0FP_430.png",
    "name": "Damage Reverse Oil Shampoo",
    "about": "Dolor voluptate velit consequat duis. Aute ad officia fugiat esse anim exercitation voluptate excepteur pariatur sit culpa duis qui esse. Labore amet ad eu veniam nostrud minim labore aliquip est sint voluptate nostrud reprehenderit. Ipsum nostrud culpa consequat reprehenderit.",
    "tags": [
        "ojon",
        "oil",
        "shampoo"
    ]
},
{
    "_id": "005",
    "isActive": "true",
    "price": "7.00",
    "picture": "/img/products/N0H101_430.png",
    "name": "Color Sustain Pro",
    "about": "Dolor voluptate velit consequat duis. Aute ad officia fugiat esse anim exercitation voluptate excepteur pariatur sit culpa duis qui esse. Labore amet ad eu veniam nostrud minim labore aliquip est sint voluptate nostrud reprehenderit. Ipsum nostrud culpa consequat reprehenderit.",
    "tags": [
        "ojon",
        "treatment"
    ]
},
{
    "_id": "006",
    "isActive": "true",
    "price": "38.00",
    "picture": "/img/products/N0J801_430.png",
    "name": "Damage Reverse Hair Serum",
    "about": "Dolor voluptate velit consequat duis. Aute ad officia fugiat esse anim exercitation voluptate excepteur pariatur sit culpa duis qui esse. Labore amet ad eu veniam nostrud minim labore aliquip est sint voluptate nostrud reprehenderit. Ipsum nostrud culpa consequat reprehenderit.",
    "tags": [
        "ojon",
        "serum"
    ]
},
{
    "_id": "007",
    "isActive": "true",
    "price": "38.00",
    "picture": "/img/products/N0J901_430.png",
    "name": "Damage Reverse Restorative Hair Treatment",
    "about": "Dolor voluptate velit consequat duis. Aute ad officia fugiat esse anim exercitation voluptate excepteur pariatur sit culpa duis qui esse. Labore amet ad eu veniam nostrud minim labore aliquip est sint voluptate nostrud reprehenderit. Ipsum nostrud culpa consequat reprehenderit.",
    "tags": [
        "ojon",
        "treatment"
    ]
},
{
    "_id": "008",
    "isActive": "true",
    "price": "27.00",
    "picture": "/img/products/N0PL01_430.png",
    "name": "Super Sleek Conditioner",
    "about": "Dolor voluptate velit consequat duis. Aute ad officia fugiat esse anim exercitation voluptate excepteur pariatur sit culpa duis qui esse. Labore amet ad eu veniam nostrud minim labore aliquip est sint voluptate nostrud reprehenderit. Ipsum nostrud culpa consequat reprehenderit.",
    "tags": [
        "ojon",
        "conditioner"
    ]
},
{
    "_id": "009",
    "isActive": "true",
    "price": "17.00",
    "picture": "/img/products/N0YJ01_430.png",
    "name": "Rare Blend Oil",
    "about": "Dolor voluptate velit consequat duis. Aute ad officia fugiat esse anim exercitation voluptate excepteur pariatur sit culpa duis qui esse. Labore amet ad eu veniam nostrud minim labore aliquip est sint voluptate nostrud reprehenderit. Ipsum nostrud culpa consequat reprehenderit.",
    "tags": [
        "ojon",
        "oil",
        "rare blend"
    ]
},
{
    "_id": "010",
    "isActive": "true",
    "price": "22.00",
    "picture": "/img/products/N08X_430.png",
    "name": "Dry Recovery Hydrating Shampoo",
    "about": "Dolor voluptate velit consequat duis. Aute ad officia fugiat esse anim exercitation voluptate excepteur pariatur sit culpa duis qui esse. Labore amet ad eu veniam nostrud minim labore aliquip est sint voluptate nostrud reprehenderit. Ipsum nostrud culpa consequat reprehenderit.",
    "tags": [
        "ojon",
        "hydrating",
        "shampoo"
    ]
},
{
    "_id": "011",
    "isActive": "true",
    "price": "22.00",
    "picture": "/img/products/N08Y_430.png",
    "name": "Dry Recovery Hydrating Conditioner",
    "about": "Dolor voluptate velit consequat duis. Aute ad officia fugiat esse anim exercitation voluptate excepteur pariatur sit culpa duis qui esse. Labore amet ad eu veniam nostrud minim labore aliquip est sint voluptate nostrud reprehenderit. Ipsum nostrud culpa consequat reprehenderit.",
    "tags": [
        "ojon",
        "hydrating",
        "conditioner"
    ]
},
{
    "_id": "012",
    "isActive": "true",
    "price": "12.00",
    "picture": "/img/products/N12R01_430.png",
    "name": "Rare Blend Deep Conditioner",
    "about": "Dolor voluptate velit consequat duis. Aute ad officia fugiat esse anim exercitation voluptate excepteur pariatur sit culpa duis qui esse. Labore amet ad eu veniam nostrud minim labore aliquip est sint voluptate nostrud reprehenderit. Ipsum nostrud culpa consequat reprehenderit.",
    "tags": [
        "ojon",
        "conditioner",
        "rare blend"
    ]
},
{
    "_id": "013",
    "isActive": "true",
    "price": "25.00",
    "picture": "/img/products/N13J01_430.png",
    "name": "Rare Blend Moisture-Rich Cleansing Conditioner",
    "about": "Dolor voluptate velit consequat duis. Aute ad officia fugiat esse anim exercitation voluptate excepteur pariatur sit culpa duis qui esse. Labore amet ad eu veniam nostrud minim labore aliquip est sint voluptate nostrud reprehenderit. Ipsum nostrud culpa consequat reprehenderit.",
    "tags": [
        "ojon",
        "cleansing",
        "conditioner",
        "rare blend"
    ]
},
{
    "_id": "014",
    "isActive": "true",
    "price": "17.00",
    "picture": "/img/products/N15E01_430.png",
    "name": "Rare Blend Protecting Treatment",
    "about": "Dolor voluptate velit consequat duis. Aute ad officia fugiat esse anim exercitation voluptate excepteur pariatur sit culpa duis qui esse. Labore amet ad eu veniam nostrud minim labore aliquip est sint voluptate nostrud reprehenderit. Ipsum nostrud culpa consequat reprehenderit.",
    "tags": [
        "ojon",
        "treatment",
        "rare blend"
    ]
},
{
    "_id": "015",
    "isActive": "true",
    "price": "15.00",
    "picture": "/img/products/N17R01_430.png",
    "name": "Rare Blend Oil Rejuvenating Therapy Lightweight Texture",
    "about": "Dolor voluptate velit consequat duis. Aute ad officia fugiat esse anim exercitation voluptate excepteur pariatur sit culpa duis qui esse. Labore amet ad eu veniam nostrud minim labore aliquip est sint voluptate nostrud reprehenderit. Ipsum nostrud culpa consequat reprehenderit.",
    "tags": [
        "ojon",
        "oil",
        "rare blend"
    ]
},
{
    "_id": "016",
    "isActive": "false",
    "price": "25.00",
    "picture": "/img/products/N098_430.png",
    "name": "Damage Reverse Restorative Hair Treatment",
    "about": "Dolor voluptate velit consequat duis. Aute ad officia fugiat esse anim exercitation voluptate excepteur pariatur sit culpa duis qui esse. Labore amet ad eu veniam nostrud minim labore aliquip est sint voluptate nostrud reprehenderit. Ipsum nostrud culpa consequat reprehenderit.",
    "tags": [
        "ojon",
        "treatment"
    ]
},
{
    "_id": "017",
    "isActive": "true",
    "price": "17.00",
    "picture": "/img/products/N16201_430.png",
    "name": "Rare Blend Infusion Shampoo",
    "about": "Dolor voluptate velit consequat duis. Aute ad officia fugiat esse anim exercitation voluptate excepteur pariatur sit culpa duis qui esse. Labore amet ad eu veniam nostrud minim labore aliquip est sint voluptate nostrud reprehenderit. Ipsum nostrud culpa consequat reprehenderit.",
    "tags": [
        "ojon",
        "shampoo",
        "rare blend"
    ]
},
{
    "_id": "018",
    "isActive": "true",
    "price": "20.00",
    "picture": "/img/products/N16401_430.png",
    "name": "Damage Reverse Thickening Shampoo",
    "about": "Dolor voluptate velit consequat duis. Aute ad officia fugiat esse anim exercitation voluptate excepteur pariatur sit culpa duis qui esse. Labore amet ad eu veniam nostrud minim labore aliquip est sint voluptate nostrud reprehenderit. Ipsum nostrud culpa consequat reprehenderit.",
    "tags": [
        "ojon",
        "shampoo"
    ]
},
{
    "_id": "019",
    "isActive": "false",
    "price": "23.00",
    "picture": "/img/products/N16501_430.png",
    "name": "Damage Reverse Thickening Conditioner",
    "about": "Dolor voluptate velit consequat duis. Aute ad officia fugiat esse anim exercitation voluptate excepteur pariatur sit culpa duis qui esse. Labore amet ad eu veniam nostrud minim labore aliquip est sint voluptate nostrud reprehenderit. Ipsum nostrud culpa consequat reprehenderit.",
    "tags": [
        "ojon",
        "conditioner"
    ]
},
{
    "_id": "020",
    "isActive": "false",
    "price": "40.00",
    "picture": "/img/products/N19601_430.png",
    "name": "Rare Blend Oil Moisture Therapy Medium Texture",
    "about": "Dolor voluptate velit consequat duis. Aute ad officia fugiat esse anim exercitation voluptate excepteur pariatur sit culpa duis qui esse. Labore amet ad eu veniam nostrud minim labore aliquip est sint voluptate nostrud reprehenderit. Ipsum nostrud culpa consequat reprehenderit.",
    "tags": [
        "ojon",
        "texture"
    ]
  }
];

module.exports = data;

Upvotes: 1

Views: 321

Answers (1)

joseluismurillorios
joseluismurillorios

Reputation: 1014

You can use a filter function to search a regex:

onSearch(e) {
    const { value } = e.target;

    const results = data.filter(o => (
        new RegExp(value, 'gi').test(o.name)) ||
        new RegExp(value, 'gi').test(o.about) ||
        new RegExp(value, 'gi').test(o.price),
    );

   console.log(results);

    this.setState({
        query: value,
        results,
    });
}

I would recommend to debounce/throttle this function if you have a lot of data on your json

Upvotes: 1

Related Questions