React autocomplete with react-virtualized to render and search through large data set

Question

I am attempting to search through an array of over 15000+ values. I would like to do this using react-autocomplete, and to render such a large list of data I am using react-virtualized List component.

Here is my attempt. The problem I am facing is on I can not type anything into the search bar, not sure why. Feel free to either edit my current code or to totally rewrite/refactor the code as I am still testing what the best approach is.

***In the codesandbox it is not rendering https://codesandbox.io/s/nifty-meninsky-qirjk?file=/src/index.js

On my local machine the List renders when I click on the search bar, but I cannot type into the box

  let searchBar;


  let searchingFor;

  if (clientList !== undefined) {

    const renderItem = (item) => {
      return <div>{item.name}</div>;
    };

    const onSelect = (item) => this.setState({ selection: item });
    console.log(clientList[1].clientName);

    const renderMenu = (items, searchingFor, autocompleteStyles) => {
      return (
        <List
          width={500}
          height={600}
          rowHeight={50}
          rowCount={clientList.length}
          rowRenderer={({ key, index, style, parent }) => {
            const client = clientList[index];
            return (
              <div key={key} style={style}>
                {" "}
                <h2>{client.clientName}</h2>
              </div>
            );
          }}
        />
      );
    };

  
    const searchTerm = searchingFor;
    let data = searchTerm
      ? clientList.filter((item) => item.clientName.includes(searchTerm))
      : [];
    searchBar = (
      <div>
        {" "}
        <Autocomplete
          renderItem={renderItem}
          items={data}
          getItemValue={(item) => item.clientName}
          value={searchingFor}
          onChange={(e, value) => (searchingFor = value)}
          onSelect={onSelect}
          renderMenu={renderMenu}
        />
     
      </div>
    );
  }

  return (
    <div>
      <Grid container>
        <Box>{searchBar} </Box>
      </Grid>
    </div>
  );

artanik · Accepted Answer · 2020-07-31 19:36:47Z

DEMO

In general, your idea was correct. My answer is just a refactor of the code and a couple of critical changes. Plus I've updated react.

import React, { useState } from "react";
import { List } from "react-virtualized";

import Autocomplete from "react-autocomplete";

const rowRenderer = (data, onSelect) => ({ key, index, style }) => {
  const client = data[index];
  return (
    <div key={key} style={style} onMouseDown={onSelect.bind(null, client)}>
      <h2>{client.title}</h2>
    </div>
  );
};

const renderMenu = (data, onSelect) => () => {
  return (
    <List
      width={500}
      height={600}
      rowHeight={50}
      rowCount={data.length}
      rowRenderer={rowRenderer(data, onSelect)}
    />
  );
};

export default function Search() {
  // default valse should be empty string
  const [searchTerm, setSearchTerm] = useState("");

  if (top100Films !== undefined) {
    let data = top100Films; // show all items by default

    if (searchTerm.length > 0) {
      data = top100Films.filter(item =>
        // title.toLowerCase is used for case insensitivity
        item.title.toLowerCase().includes(searchTerm.toLowerCase())
      );
    }

    const onSelect = item => setSearchTerm(item.title);

    return (
      <div>
        <Autocomplete
          items={data}
          value={searchTerm}
          getItemValue={item => item.title}
          onChange={(e, value) => setSearchTerm(value)}
          renderMenu={renderMenu(data, onSelect)}
          renderItem={item => <div>{item.name}</div>}
          shouldItemRender={() => false}
        />
      </div>
    );
  }
}

const top100Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  { title: "The Godfather: Part II", year: 1974 }
  // other items are available on Demo page
];

this works thank you , but I am not able to update the search bar value with what the user clicks from the react-virtulize List.

Collectives™ on Stack Overflow

React autocomplete with react-virtualized to render and search through large data set

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related