reactjs - AutoComplete Material UI isnt filtering options based on inputValue - Stack Overflow

admin管理员组

文章数量:1318572

I am trying to implement an autocomplete field using mui, whose options will change based on a global search, whatever the data that got filtered based on global search their descriptions are set as option to the autocomplete. Issue is when i type something in the text area the options arent reducing/filtering based on the input value. This issue isnt happening when i use static data(optionsh). how to resolve this?. here descriptionOptions is an array of string just like optionsh

useEffect(() => {
    let filteredData = //filter logic returns array of objects
    setFilteredData(filteredData);
  }, [searchInput]);
 const optionsh = [ "hi", "bye", "hohho"];
 const descriptionOptions = filteredData?.map(item => item.activityDescription) ?? [];
  const handleDescriptionFilterText = (value) => {
    setDescriptionSearchText(value);
  }

  <Autocomplete 
    options={descriptionOptions}
    size="small"
    renderInput={(params) => 
    <TextField {...params} 
      onChange={(event) => handleDescriptionFilterText(event.target.value)}
      sx={{
        width: '200px',   
        height: '10px',  
        '& .MuiInputBase-root': {
          height: '40px',    
          padding: '8px',
        } 
      }}
    />
  }
  />

I want the options to filter on text area search, i tried using state for options and updating it whenever there is a input value change, the option state is updating but not reflecting in the ui

  // useEffect(() => {
  //   if(!descriptionSearchText){
  //     setDescriptionOptions(filteredData.map(item => item.activityDescription))
  //   }else {
  //     const options = filteredData.map(item => item.activityDescription).filter( option => option.toLowerCase().includes(descriptionSearchText.toLowerCase()));
  //     setDescriptionOptions(options)
  //   }
  // },[descriptionSearchText, filteredData])

I am trying to implement an autocomplete field using mui, whose options will change based on a global search, whatever the data that got filtered based on global search their descriptions are set as option to the autocomplete. Issue is when i type something in the text area the options arent reducing/filtering based on the input value. This issue isnt happening when i use static data(optionsh). how to resolve this?. here descriptionOptions is an array of string just like optionsh

useEffect(() => {
    let filteredData = //filter logic returns array of objects
    setFilteredData(filteredData);
  }, [searchInput]);
 const optionsh = [ "hi", "bye", "hohho"];
 const descriptionOptions = filteredData?.map(item => item.activityDescription) ?? [];
  const handleDescriptionFilterText = (value) => {
    setDescriptionSearchText(value);
  }

  <Autocomplete 
    options={descriptionOptions}
    size="small"
    renderInput={(params) => 
    <TextField {...params} 
      onChange={(event) => handleDescriptionFilterText(event.target.value)}
      sx={{
        width: '200px',   
        height: '10px',  
        '& .MuiInputBase-root': {
          height: '40px',    
          padding: '8px',
        } 
      }}
    />
  }
  />

I want the options to filter on text area search, i tried using state for options and updating it whenever there is a input value change, the option state is updating but not reflecting in the ui

  // useEffect(() => {
  //   if(!descriptionSearchText){
  //     setDescriptionOptions(filteredData.map(item => item.activityDescription))
  //   }else {
  //     const options = filteredData.map(item => item.activityDescription).filter( option => option.toLowerCase().includes(descriptionSearchText.toLowerCase()));
  //     setDescriptionOptions(options)
  //   }
  // },[descriptionSearchText, filteredData])

• reactjs
• material-ui
• autocomplete

Share Improve this question Follow asked Jan 21 at 10:55 Kavitha TKavitha T 1111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Instead of defining a state for filteredData use a local variable and remove useEffect like below:

const filteredData = useMemo(()=>  //filter logic returns array of objects
,[searchInput]);


 const optionsh = [ "hi", "bye", "hohho"];
 const descriptionOptions = filteredData?.map(item => item.activityDescription) ?? [];
  const handleDescriptionFilterText = (value) => {
    setDescriptionSearchText(value);
  }

  <Autocomplete 
    options={descriptionOptions}
    size="small"
    renderInput={(params) => 
    <TextField {...params} 
      onChange={(event) => handleDescriptionFilterText(event.target.value)}
      sx={{
        width: '200px',   
        height: '10px',  
        '& .MuiInputBase-root': {
          height: '40px',    
          padding: '8px',
        } 
      }}
    />
  }
  />

If the problem still persist share your filter logic maybe the problem is there.

本文标签： reactjsAutoComplete Material UI isnt filtering options based on inputValueStack Overflow