使用React中JSON对象的建议自动完成

时间：2019-09-10 17:09:21

标签： reactjs

我很难解决这个问题。任务是在搜索栏中执行搜索，并且在搜索过程中，如果匹配（商品，价格等），让商品自动完成搜索。我让它遍历JSON，但似乎无法弄清楚如何获得结果。感谢您的任何帮助，您可以提供。我是React的新手，正在尝试学习它。

下面是我的代码。

 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;

1 个答案:

答案 0 :(得分：1)

您可以使用过滤器功能搜索正则表达式：

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,
    });
}

如果您的json上有很多数据，我建议去反跳/限制此功能

相关问题
最新问题