"jump to" search component?

[pamelahu]

Hi,

Wanted to ask about the "jump to" search bar we have in the upper right top nav of console. Is this a component that we can reuse?

The Console team wants to utilize the search ability to do non-exact search term matching, for instance: if several account SIDs had "123" in it, all of them would appear if you type "123"

[dosubot[bot]]

Hey there, @pamelahu! 🚀 I'm Dosu, your friendly neighborhood bot here to help you tackle bugs, answer questions, and guide you on your journey to becoming a contributor while you wait for a human maintainer to chime in. I'm all about lending a helping hand, or circuit, in this case! 😄 I'm taking a quick look at your "jump to" search component question and will get back to you with a full answer shortly. Stay tuned!

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

For implementing a search functionality that allows for non-exact search term matching, like the "jump to" search bar in the upper right top nav of the console, you would want to use the Combobox component from Paste. The Combobox component supports typeahead/autocomplete functionality, which is suitable for scenarios where you want to display search results as users type, even if the search terms are not an exact match.

Here's a basic example of how you might use the Combobox component to achieve this:

import React from 'react';
import {Combobox} from '@twilio-paste/combobox';

const items = ['Account SID 12345', 'Account SID 12346', 'Account SID 67890'];

const Example = () => {
  return (
    <Combobox
      items={items}
      labelText="Search"
      helpText="Type to search for an Account SID"
      optionTemplate={(item) => <div>{item}</div>}
      onInputValueChange={({inputValue}) => {
        // You can implement your filtering logic here based on `inputValue`
      }}
    />
  );
};

This example demonstrates a basic setup. You would need to adapt the items array and the onInputValueChange function to work with your specific data source and filtering logic.

For more detailed information on how to use the Combobox component, including all its props and functionalities, please refer to the official Paste documentation for the Combobox component.

Remember, the Combobox component is versatile and can be adapted to various search and selection needs, making it a good choice for implementing a feature similar to the "jump to" search bar in the console.

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Search component - Answer (updated: 07/11/2022, similarity score: 85%)
• Items filtering in Sidebar (updated: 11/06/2023, similarity score: 85%)
• Search Field (updated: 07/22/2022, similarity score: 85%)

[dosubot[bot]]

Sure, I can help you with that. The Combobox component from Paste can indeed be used to implement a search functionality similar to the "jump to" search bar. You can customize the filtering logic by using the onInputValueChange prop to handle the input changes and manage the items to display based on your custom logic. Here's a basic example:

import React, { useState } from "react";
import { Combobox } from "@twilio-paste/combobox"; // Ensure this import path matches your project structure

// Assuming this is your data source
const allItems = [
  { letter: "apple", number: 1 },
  { letter: "apricot", number: 2 },
  { letter: "banana", number: 3 },
  { letter: "blueberry", number: 4 },
  { letter: "blackberry", number: 5 },
  { letter: "cranberry", number: 6 },
  { letter: "dragonfruit", number: 7 },
];

const CustomFilterCombobox = () => {
  const [items, setItems] = useState(allItems);

  const handleInputValueChange = ({ inputValue }) => {
    // Implement your non-exact matching logic here
    // This example filters items where the input value is a substring of the item.letter
    const filteredItems = allItems.filter((item) =>
      item.letter.toLowerCase().includes(inputValue.toLowerCase())
    );
    setItems(filteredItems);
  };

  return (
    <Combobox
      items={items}
      onInputValueChange={handleInputValueChange}
      itemToString={(item) => (item ? item.letter : "")}
      optionTemplate={(item) => <div>{`${item.letter} (${item.number})`}</div>}
      labelText="Choose a fruit:"
      helpText="Start typing to search for a fruit"
    />
  );
};

export default CustomFilterCombobox;

In this example, the allItems array represents a specific data source. The handleInputValueChange function is used to filter this data based on the user's input. It uses a simple .filter() method to find items where the letter property includes the input value, ignoring case sensitivity. This demonstrates a basic non-exact search term matching functionality.

You can adapt this example to work with different data sources and filtering logic by modifying the allItems array and the logic within the handleInputValueChange function.

For further reading, you can refer to the Combobox customization story in the Paste repository.

As for the available props for the Combobox component in Paste and how they affect the component's behavior, you can refer to the Combobox types file in the Paste repository. This file contains detailed information about each prop, including its type, default value, and how it affects the component's behavior.

I hope this helps! If you have any other questions or need further clarification, feel free to ask.

Sources

• packages/paste-core/components/combobox/stories/Combobox-customization.stories.tsx
• packages/paste-core/components/combobox/src/types.ts

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[roxanagomez]

Hey @pamelahu

Dosu's response is correct, you can use the Combobox for searching functionalities as the ones you describe on your comment.

[nkrantz]

Are you looking for a component that includes the specific search/term-matching functionality @pamelahu ? Or just the Combobox component?

[pamelahu]

yes, looking for a component that includes the specific search/term-matching functionality!

[nkrantz]

We unfortunately don't provide that functionality with Paste, but your engineer could reach out to the eng who created the Console search box or look at that code. The Paste Combobox is built on top of our Combobox Primitive, which comes from the Downshift library.

[TheSisb]

They can also look at how Console Zen did it in their repo, for a second implementation example.