semantic-ui-react#Search JavaScript Examples

render() {
    const { hasError, isLoading, results, value, open } = this.state;
    const {
      disabled,
      id,
      name,
      minCharacters,
      value: propsValue,
      placeholder,
    } = this.props;
    const { patronSelectionError } = this.context;
    return (
      <Search
        fluid
        disabled={disabled}
        id={id}
        name={name}
        className={hasError || patronSelectionError === 'true' ? 'error' : null}
        open={open}
        loading={isLoading}
        minCharacters={minCharacters}
        onResultSelect={this.onSelectResult}
        onSearchChange={this.onSearchChange}
        onBlur={this.onBlur}
        onFocus={this.onFocus}
        noResultsMessage={this.renderNoResults()}
        results={results}
        value={propsValue || value}
        resultRenderer={this.renderResults}
        placeholder={placeholder}
        input={{ ref: (element) => (this.searchInputRef = element) }}
      />
    );
  }

SearchBar = (props) => {
  const { t } = props;
  return (
    <div className="searchBarDiv">
      <Search
        className="searchBar"
        loading={props.isLoading}
        onResultSelect={props.handleResultSelect}
        onSearchChange={_.debounce(props.handleSearchChange, 500, {
          leading: true,
        })}
        results={props.results}
        value={props.value}
        placeholder={t('patientBoard:searchBar.haveAQuestion')}
        noResultsMessage={t('patientBoard:searchBar.noResultsFound')}
        noResultsDescription={t('patientBoard:searchBar.selectAskAQuestion')}
        onKeyPress={props.handleKeyPress}
      />
    </div>
  );
}

render () {
    const {
      data,
      year,
      round_no,
      institute_type,
      quota,
      currPage,
      count,
      search,
      clickedColumn,
      direction,
      activeIndexs,
      institute_short,
      program,
      duration,
      degree,
      category,
      pool,
      userrank,
      userdelta
    } = this.state
    return (
      <div className='app-main' id='scroll-to-filter'>
        <Segment>
          <div className='primary-filters-margin'>
            <div className='year-type'>
              <div
                className={
                  isBrowser ? 'year-round-browser' : 'year-round-mobile'
                }
              >
                <div>
                  <Button
                    content='Year'
                    color='facebook'
                    className='year-button'
                  />
                  <Dropdown
                    name='year'
                    value={year}
                    placeholder='All'
                    selection
                    compact
                    options={yearDropDownOptions}
                    onChange={this.handleChange}
                  />
                </div>
                {year === '2021' && (
                  <div>
                    <Button
                      className={
                        isBrowser
                          ? 'round-button-browser'
                          : 'round-button-mobile'
                      }
                      content='Round'
                      color='facebook'
                    />
                    <Dropdown
                      name='round_no'
                      value={round_no}
                      placeholder='Round no'
                      selection
                      compact
                      options={roundDropDownOptions}
                      onChange={this.handleChange}
                    />
                  </div>
                )}
              </div>
              <div className='year-type-margin'>
                <Form>
                  <Form.Group className='form-group-margin-bottom'>
                    <Form.Field>
                      <Button content='College' color='facebook' />
                    </Form.Field>
                    <Form.Field>
                      <Radio
                        className='college-margin'
                        label='IIT'
                        name='institute_type'
                        value='IIT'
                        checked={institute_type === 'IIT'}
                        onChange={this.handleChange}
                      />
                    </Form.Field>
                    <Form.Field>
                      <Radio
                        className='college-margin'
                        label='NIT'
                        name='institute_type'
                        value='NIT'
                        checked={institute_type === 'NIT'}
                        onChange={this.handleChange}
                      />
                    </Form.Field>
                  </Form.Group>
                </Form>
              </div>
              {institute_type === 'NIT' && (
                <div className='year-type-margin'>
                  <Form>
                    <Form.Group className='form-group-margin-bottom'>
                      <Form.Field>
                        <Button
                          content='State'
                          color='facebook'
                          className='state-button'
                        />
                      </Form.Field>
                      <Form.Field>
                        <Radio
                          className='college-margin'
                          label='HS'
                          name='quota'
                          value='HS'
                          checked={quota === 'HS'}
                          onChange={this.handleChange}
                        />
                      </Form.Field>
                      <Form.Field>
                        <Radio
                          className='college-margin'
                          label='OS'
                          name='quota'
                          value='OS'
                          checked={quota === 'OS'}
                          onChange={this.handleChange}
                        />
                      </Form.Field>
                      <Form.Field>
                        <Radio
                          className='college-margin'
                          label='Both'
                          name='quota'
                          value='All'
                          checked={quota === ''}
                          onChange={this.handleChange}
                        />
                      </Form.Field>
                    </Form.Group>
                  </Form>
                </div>
              )}
            </div>
            <SemanticToastContainer />
          </div>

          <div className='year-note'>
            To all the future JEE aspirants, Best of Luck! :))
          </div>
        </Segment>
        <Accordion fluid styled>
          <Accordion.Title
            active={activeIndexs.includes(-1)}
            index={-1}
            onClick={this.handleAccordian}
          >
            <Icon name='dropdown' />
            Instructions
          </Accordion.Title>
          <Accordion.Content active={activeIndexs.includes(-1)}>
            <Message info list={instructions} />
          </Accordion.Content>

          <Accordion.Title
            active={activeIndexs.includes(0)}
            index={0}
            onClick={this.handleAccordian}
          >
            <Icon name='dropdown' />
            Primary Filters
          </Accordion.Title>
          <Accordion.Content active={activeIndexs.includes(0)}>
            <div className={isBrowser ? 'secondary-filters' : null}>
              <div className={isBrowser ? 'secondary-filters-col' : null}>
                <div className='secondary-filters-margin'>
                  <Button content='Institute' color='facebook' />
                  <Dropdown
                    className='dropdown-filters'
                    name='institute_short'
                    value={institute_short}
                    placeholder='All'
                    selection
                    search
                    clearable
                    options={
                      this.state.institute_type === 'IIT'
                        ? iitDropDownOptions
                        : nitDropDownOptions
                    }
                    onChange={this.handleChange}
                  />
                </div>
                <div className='secondary-filters-margin'>
                  <Button content='Program' color='facebook' />
                  <Dropdown
                    className='dropdown-filters'
                    name='program'
                    value={program}
                    placeholder='All'
                    selection
                    search
                    clearable
                    options={
                      this.state.institute_type === 'IIT'
                        ? iitProgramDropDownOptions
                        : nitProgramDropDownOptions
                    }
                    onChange={this.handleChange}
                  />
                </div>
              </div>
              <div className={isBrowser ? 'secondary-filters-col' : null}>
                <div className='secondary-filters-margin'>
                  <Button content='Degree' color='facebook' />
                  <Dropdown
                    className='dropdown-filters'
                    name='degree'
                    value={degree}
                    placeholder='All'
                    selection
                    search
                    clearable
                    options={
                      this.state.institute_type === 'IIT'
                        ? iitDegreeDropDownOptions
                        : nitDegreeDropDownOptions
                    }
                    onChange={this.handleChange}
                  />
                </div>
                <div className='secondary-filters-margin'>
                  <Button content='Duration' color='facebook' />
                  <Dropdown
                    className='dropdown-filters'
                    name='duration'
                    value={duration}
                    placeholder='All'
                    selection
                    search
                    clearable
                    options={durationDropDownOptions}
                    onChange={this.handleChange}
                  />
                </div>
              </div>
              <div className={isBrowser ? 'secondary-filters-col' : null}>
                <div className='secondary-filters-margin'>
                  <Button content='Pool' color='facebook' />
                  <Dropdown
                    className='dropdown-filters'
                    name='pool'
                    value={pool}
                    placeholder='All'
                    selection
                    search
                    clearable
                    options={poolDropDownOptions}
                    onChange={this.handleChange}
                  />
                </div>
                <div className='secondary-filters-margin'>
                  <Button content='Category' color='facebook' />
                  <Dropdown
                    className='dropdown-filters'
                    name='category'
                    value={category}
                    placeholder='All'
                    selection
                    search
                    clearable
                    options={categoryDropDownOptions}
                    onChange={this.handleChange}
                  />
                </div>
              </div>
            </div>
          </Accordion.Content>

          <Accordion.Title
            active={activeIndexs.includes(1)}
            index={1}
            onClick={this.handleAccordian}
          >
            <Icon name='dropdown' />
            Personal Rank based search
          </Accordion.Title>
          <Accordion.Content active={activeIndexs.includes(1)}>
            <div className='personalized-filter'>
              <div className='personlized-filter-align'>
                <Button
                  content={
                    institute_type === 'IIT' ? 'Adv. Rank' : 'Mains Rank'
                  }
                  color='blue'
                />
                <Input
                  style={{ width: 130, height: 37 }}
                  type='number'
                  name='userrank'
                  value={userrank}
                  onChange={this.handlePersonalFilter}
                  placeholder='Enter your JEE Rank'
                />
              </div>
              <div className='personlized-filter-align'>
                <Button content='Delta' color='blue' />
                <Input
                  style={{ width: 130, height: 37 }}
                  type='number'
                  name='userdelta'
                  value={userdelta}
                  onChange={this.handlePersonalFilter}
                  placeholder='Enter prefered Delta'
                />
              </div>
            </div>
          </Accordion.Content>
        </Accordion>

        <div className='reset-margin'>
          <Button color='google plus' onClick={this.handleResetFilters}>
            Reset Filters
          </Button>
        </div>

        <div>
          <div className='global-search'>
            <Search
              name='search'
              value={search}
              placeholder='Search by any keyword'
              open={false}
              fluid
              onSearchChange={this.handleChange}
            />
          </div>
        </div>

        <div className='table-overflow table-margin' id='scroll-ref'>
          <Table celled color={'blue'} sortable unstackable>
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell textAlign='center'>Sr.</Table.HeaderCell>
                <Table.HeaderCell textAlign='center'>Year</Table.HeaderCell>
                {year === '2021' && (
                  <Table.HeaderCell textAlign='center'>Round</Table.HeaderCell>
                )}
                <Table.HeaderCell
                  sorted={
                    clickedColumn === 'institute_short' ? direction : null
                  }
                  onClick={this.handleSort('institute_short')}
                  textAlign='center'
                >
                  Institute
                </Table.HeaderCell>
                <Table.HeaderCell
                  sorted={clickedColumn === 'program_name' ? direction : null}
                  onClick={this.handleSort('program_name')}
                  textAlign='center'
                >
                  Program
                </Table.HeaderCell>
                {institute_type === 'NIT' && (
                  <Table.HeaderCell textAlign='center'>Quota</Table.HeaderCell>
                )}
                <Table.HeaderCell
                  sorted={
                    clickedColumn === 'program_duration' ? direction : null
                  }
                  onClick={this.handleSort('program_duration')}
                  textAlign='center'
                >
                  Duration
                </Table.HeaderCell>
                <Table.HeaderCell
                  sorted={clickedColumn === 'degree_short' ? direction : null}
                  onClick={this.handleSort('degree_short')}
                  textAlign='center'
                >
                  Degree
                </Table.HeaderCell>
                <Table.HeaderCell
                  sorted={clickedColumn === 'category' ? direction : null}
                  onClick={this.handleSort('category')}
                  textAlign='center'
                >
                  Category
                </Table.HeaderCell>
                <Table.HeaderCell
                  sorted={clickedColumn === 'pool' ? direction : null}
                  onClick={this.handleSort('pool')}
                  textAlign='center'
                >
                  Pool
                </Table.HeaderCell>
                <Table.HeaderCell
                  sorted={clickedColumn === 'opening_rank' ? direction : null}
                  onClick={this.handleSort('opening_rank')}
                  textAlign='center'
                >
                  Opening
                </Table.HeaderCell>
                <Table.HeaderCell
                  sorted={clickedColumn === 'closing_rank' ? direction : null}
                  onClick={this.handleSort('closing_rank')}
                  textAlign='center'
                >
                  Closing
                </Table.HeaderCell>
              </Table.Row>
            </Table.Header>
            <Table.Body>
              {data.map(element => (
                <Table.Row key={data.indexOf(element)}>
                  <Table.Cell collapsing textAlign='center'>
                    {data.indexOf(element) + 1 + 50 * (currPage - 1)}
                  </Table.Cell>
                  <Table.Cell collapsing textAlign='center'>
                    {element.year}
                  </Table.Cell>
                  {year === '2021' && (
                    <Table.Cell collapsing textAlign='center'>
                      {element.round_no}
                    </Table.Cell>
                  )}
                  <Table.Cell textAlign='center'>
                    {element.institute_short}
                  </Table.Cell>
                  <Table.Cell textAlign='center'>
                    {element.program_name}
                  </Table.Cell>
                  {institute_type === 'NIT' && (
                    <Table.Cell collapsing textAlign='center'>
                      {element.quota}
                    </Table.Cell>
                  )}
                  <Table.Cell collapsing textAlign='center'>
                    {element.program_duration}
                  </Table.Cell>
                  <Table.Cell textAlign='center'>
                    {element.degree_short}
                  </Table.Cell>
                  <Table.Cell collapsing textAlign='center'>
                    {element.category}
                  </Table.Cell>
                  <Table.Cell textAlign='center'>{element.pool}</Table.Cell>
                  <Table.Cell textAlign='center'>
                    {element.is_preparatory
                      ? element.opening_rank + ' - P'
                      : element.opening_rank}
                  </Table.Cell>
                  <Table.Cell textAlign='center'>
                    {element.is_preparatory
                      ? element.closing_rank + ' - P'
                      : element.closing_rank}
                  </Table.Cell>
                </Table.Row>
              ))}
            </Table.Body>
            <Table.Footer>
              <Table.Row>
                <Table.HeaderCell colSpan='10'>
                  <Pagination
                    activePage={currPage}
                    totalPages={data ? Math.ceil(count / 50) : '1'}
                    onClick={() =>
                      document.getElementById('scroll-ref').scrollIntoView()
                    }
                    onPageChange={this.handlePageChange}
                    firstItem={{
                      'aria-label': 'First item',
                      content: <Icon name='angle double left' />,
                      key: '1'
                    }}
                    prevItem={{
                      'aria-label': 'Previous item',
                      content: <Icon name='angle left' />,
                      key: '4'
                    }}
                    nextItem={{
                      'aria-label': 'Next item',
                      content: <Icon name='angle right' />,
                      key: '3'
                    }}
                    lastItem={{
                      'aria-label': 'Last item',
                      content: <Icon name='angle double right' />,
                      key: '2'
                    }}
                  />
                </Table.HeaderCell>
              </Table.Row>
            </Table.Footer>
          </Table>
          <Icon
            className='scroll-to-top'
            name='chevron circle up'
            size='big'
            color='grey'
            onClick={() => {
              document.getElementById('scroll-to-filter').scrollIntoView()
            }}
          />
        </div>
        <div className='github-repo'>
          *This is an open source project, if found helpful, do star{' '}
          <a
            href='https://github.com/nisarg73/jee-dashboard'
            target='_blank'
            rel='noopener noreferrer'
          >
            its github repo
          </a>{' '}
          :D
        </div>
      </div>
    )
  }

SearchUsers = ({ visible, closeFn }) => {
  let searchRef = useRef();

  const [loading, setLoading] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  // null -> not searching for results
  // [] -> No results
  // [...] -> Results
  const [searchResults, setSearchResults] = useState(null);

  useEffect(() => {
    if (visible && searchRef) {
      searchRef.focus();
    }
  }, [visible]);

  const {
    myChats,
    setMyChats,
    chatConfig,
    selectedChat,
    setSelectedChat,
  } = useChat();

  const selectUser = username => {
    addPerson(chatConfig, selectedChat.id, username, () => {
      const filteredChats = myChats.filter(c => c.id !== selectedChat.id);
      const updatedChat = {
        ...selectedChat,
        people: [...selectedChat.people, { person: { username } }],
      };

      setSelectedChat(updatedChat);
      setMyChats([...filteredChats, updatedChat]);
      closeFn();
    });
  };

  useEffect(() => {
    if (debouncedSearchTerm) {
      setLoading(true);
      getOtherPeople(chatConfig, selectedChat.id, (chatId, data) => {
        const userNames = Object.keys(data)
          .map(key => data[key].username)
          .filter(u =>
            u.toLowerCase().includes(debouncedSearchTerm.toLowerCase()),
          );
        setSearchResults(userNames.map(u => ({ title: u })));
        setLoading(false);
      });
    } else {
      setSearchResults(null);
    }
  }, [debouncedSearchTerm, chatConfig, selectedChat]);

  return (
    <div
      className="user-search"
      style={{ display: visible ? 'block' : 'none' }}
    >
      <Search
        fluid
        onBlur={closeFn}
        loading={loading}
        value={searchTerm}
        placeholder="Search For Users"
        open={!!searchResults && !loading}
        input={{ ref: r => (searchRef = r) }}
        onSearchChange={e => setSearchTerm(e.target.value)}
        results={searchResults}
        onResultSelect={(e, data) => {
          if (data.result?.title) {
            selectUser(data.result.title);
          }
        }}
      />
    </div>
  );
}

SearchBanner = (props) => {
  const [options, setOptions] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [results, setResults] = useState([]);
  // localStorage.getItem("value") ?
  const [value, setValue] = useState("");
  const [selectedTags, setSelectedTags] = useState([]);

  useEffect(() => {
    setIsLoading(true);
    fetch(`${process.env.API_URL}/search/options?q=${value}`)
      .then((resp) => resp.json())
      .then((options) => {
        setOptions(options);
      });
    setIsLoading(false);
    // side effect
  }, [value]);

  const hanldeTagClick = (tagValue) => {
    let newArr = selectedTags.filter((tag) => tag === tagValue);
    if (newArr.length === 0) {
      // add
      let newArr2 = [...selectedTags, tagValue];
      setSelectedTags(newArr2);
    } else {
      // remove
      let newArr3 = selectedTags.filter((tag) => tag !== tagValue);
      setSelectedTags(newArr3);
    }
  };

  const handleSearchClick = (e) => {
    // backend accepts as selectedOption
    // you can change it though
    const selectedOption = value;
    const redirectLocation = {
      pathname: "/results",
      search: "?category=search",
      state: { selectedOption, selectedTags },
    };
    if (selectedOption.length > 0 || selectedTags.length > 0) { 
      props.history.push(redirectLocation);
    }
  };

  const handleResultSelect = (e, { result }) => { 
    setValue(result.title);
  }

  const handleSearchChange = (e, { value }) => {
    // setIsLoading(true);
    setValue(value);

    const re = new RegExp(_.escapeRegExp(value), "i");
    const isMatch = (result) => re.test(result.title);

    // setIsLoading(false);
    setResults(_.filter(options, isMatch));
  };

  return (
    <div className="banner">
      <div className="search-input-wrapper">
        <Search
          loading={isLoading}
          onResultSelect={handleResultSelect}
          onSearchChange={_.debounce(handleSearchChange, 500, {
            leading: true,
          })}
          results={results}
          value={value}
          placeholder="Search Bootcamp"
          // {...props}
        />
        <div className="rsw">
          <button
            type="submit"
            value="submit"
            className="search-btn"
            onClick={handleSearchClick}
            // add onKeyPress
          ></button>
        </div>
      </div>

      <div className="search-tags">
        {initalTags.map((tag, i) => {
          const found = selectedTags.some((el) => el === tag);
          const clsName = found ? "tags active" : "tags";
          return (
            <button
              key={i}
              onClick={() => hanldeTagClick(tag)}
              className={clsName}
            >
              {tag}
            </button>
          );
        })}
      </div>
    </div>
  );
}