How to use match-sorter - 10 common examples

async function onSubmit(event) {
    event.preventDefault()
    if (!tweets && window.location.href.includes("mobile.twitter.com")) {
      return alert(
        `Shucks, you found that one little thing that doesn't work. You are on 'mobile.twitter.com' and it's not loading bookmarks for some reason. Change to 'twitter.com' and then it should work`
      )
    }

    if (!tweets) {
      return alert("Oh snap, no bookmarked tweets are loaded. Wait a little longer or reload to try again")
    }

    const query = event.target.elements[0].value
    const results = matchSorter(tweets, query, {
      keys: [
        { key: "full_text", threshold: matchSorter.rankings.ACRONYM },
        { key: "user.screen_name", threshold: matchSorter.rankings.ACRONYM },
        { key: "user.name", threshold: matchSorter.rankings.ACRONYM },
      ],
      keepDiacritics: true,
    })
    // console.log("Bookmark search results", results)
    setResults(results)
  }

if (!tweets && window.location.href.includes("mobile.twitter.com")) {
      return alert(
        `Shucks, you found that one little thing that doesn't work. You are on 'mobile.twitter.com' and it's not loading bookmarks for some reason. Change to 'twitter.com' and then it should work`
      )
    }

    if (!tweets) {
      return alert("Oh snap, no bookmarked tweets are loaded. Wait a little longer or reload to try again")
    }

    const query = event.target.elements[0].value
    const results = matchSorter(tweets, query, {
      keys: [
        { key: "full_text", threshold: matchSorter.rankings.ACRONYM },
        { key: "user.screen_name", threshold: matchSorter.rankings.ACRONYM },
        { key: "user.name", threshold: matchSorter.rankings.ACRONYM },
      ],
      keepDiacritics: true,
    })
    // console.log("Bookmark search results", results)
    setResults(results)
  }

addTechnology({ selection, highlightedIndex }) {
    const { inputValue } = this.state;
    const { allTechs, userTechnologies } = this.props;
    // If there is a selection then make that the value
    let lastUserAddedTechnology = selection;
    if (!lastUserAddedTechnology) {
      if (highlightedIndex === null) {
        // If the user didn't select an option from dropdown, use the input as the value
        lastUserAddedTechnology = inputValue.toLowerCase();
      } else {
        const matches = matchSorter(allTechs, inputValue.toLowerCase()).filter(
          i => !inputValue.toLowerCase() || i.includes(inputValue.toLowerCase())
        );
        if (matches[highlightedIndex] === inputValue) {
          // This is only for edge cases (user types "java" but selects "javascript")
          // Note that in the case above, addTechnology gets called twice. Once with a
          // selection, and once without a selection
          lastUserAddedTechnology = inputValue.toLowerCase();
        }
      }
    }
    if (
      !userTechnologies.some(
        element => element.language === lastUserAddedTechnology
      ) &&
      allTechs.includes(lastUserAddedTechnology)
    ) {

);

  // this will be the same every time and because this re-renders on every
  // keystroke I'm pretty sure useMemo is appropriate here.
  const topics = React.useMemo(() => {
    return result.data.topics.map(e => ({
      name: e.name,
    }));
  }, [result.data.topics]);

  const [search, setSearch] = React.useState("");
  const searchInputRef = React.useRef();
  const filteredTopics = matchSorter(topics, search, {
    keys: [
      // "name",
      { key: "name", threshold: matchSorter.rankings.CONTAINS },
    ],
  });

  return (
    <div style="{{">
      <div>
        <label>Search Topics: </label>
        <input id="search-input"> setSearch(searchInputRef.current.value), {
            wait: 200,
          })}
          type="search"
          autoFocus
        /&gt;</div></div>

// keystroke I'm pretty sure useMemo is appropriate here.
  const blogposts = React.useMemo(() => {
    return result.blogposts.edges.map(e => ({
      ...e.node.fields,
      excerpt: e.node.excerpt,
    }))
  }, [result.blogposts.edges])

  const [search, setSearch] = React.useState('')
  const searchInputRef = React.useRef()
  const filteredBlogPosts = matchSorter(blogposts, search, {
    keys: [
      'title',
      'categories',
      'keywords',
      {key: 'description', threshold: matchSorter.rankings.CONTAINS},
      {key: 'excerpt', threshold: matchSorter.rankings.CONTAINS},
    ],
  })

  return (
    <div>
      <div>
        <h1>Search Kent C. Dodds Blogposts</h1>
      </div>
      <small>
        {`If you can't find what you're looking for with this, try `}
        <a href="https://www.google.com/search?q=site%3Areact-vis.com%2Fblog+testing">
          using Google
        </a>
        {'.'}
      </small></div>

const getType = (type, $) => {
  const result = []

  // If TV has been selected, filter New from Continuing.
  const typeString = matchSorter(possibleTypes, type)[0]

  let classToSearch = `.js-seasonal-anime-list-key-${type2Class[typeString]} .seasonal-anime.js-seasonal-anime`
  const typeClass = `.js-seasonal-anime-list-key-${type2Class[typeString]}`

  // If TVNew or TVCon are selected, filter them out to the specific elements on page
  if (typeString.substr(0, 2) === 'TV' && typeString !== 'TV') {
    const tvType = matchSorter(possibleTV, typeString)[0]
    $(typeClass).children('.anime-header').each(function () {
      if ($(this).text() === tvType) {
        classToSearch = $(this).parent().children()
      }
    })
  }

  $(classToSearch).each(function () {
    if (!$(this).hasClass('kids') && !$(this).hasClass('r18')) {

.then(async (items) => {
        if (!items.length) {
          resolve(null)
          return
        }
        try {
          const bestMacth = getBestMatch
            ? match(items, name, { keys: ['name'] })[0]
            : items[0]
          const url = bestMacth ? bestMacth.url : items[0].url
          const data = await getInfoFromURL(url)

          data.url = url

          resolve(data)
        } catch (e) {
          /* istanbul ignore next */
          reject(e)
        }
      })
      .catch(/* istanbul ignore next */(err) => reject(err))

const getType = (type, $) => {
  const result = []

  // If TV has been selected, filter New from Continuing.
  const typeString = matchSorter(possibleTypes, type)[0]

  let classToSearch = `.js-seasonal-anime-list-key-${type2Class[typeString]} .seasonal-anime.js-seasonal-anime`
  const typeClass = `.js-seasonal-anime-list-key-${type2Class[typeString]}`

  // If TVNew or TVCon are selected, filter them out to the specific elements on page
  if (typeString.substr(0, 2) === 'TV' && typeString !== 'TV') {
    const tvType = matchSorter(possibleTV, typeString)[0]
    $(typeClass).children('.anime-header').each(function () {
      if ($(this).text() === tvType) {
        classToSearch = $(this).parent().children()
      }
    })
  }

  $(classToSearch).each(function () {
    if (!$(this).hasClass('kids') && !$(this).hasClass('r18')) {
      const general = $(this).find('div:nth-child(1)')
      const picture = $(this).find('.image').find('img')
      const prod = $(this).find('.prodsrc')
      const info = $(this).find('.information')
      const synopsis = $(this).find('.synopsis')

      result.push({

    () => matchSorter(allObjects, search, {keys: ["name"]}),
    [allObjects, search],

checkAll,
      checkAllLabel,
      searchable,
      createBtnLabel,
      disabled,
      searchPromptText,
      editable,
      removable
    } = this.props;
    const { selection } = this.state;

    let checkedAll = false;
    let checkedPartial = false;
    let filtedOptions: Array<option> =
      inputValue &amp;&amp; isOpen &amp;&amp; !loadOptions
        ? matchSorter(options, inputValue, {
            keys: [labelField || "label", valueField || "value"]
          })
        : options.concat();

    const selectionValues = selection.map(select =&gt; select.value);
    if (multiple &amp;&amp; checkAll) {
      const optionsValues = options.map(option =&gt; option.value);

      checkedAll = optionsValues.every(
        option =&gt; selectionValues.indexOf(option) &gt; -1
      );
      checkedPartial = optionsValues.some(
        option =&gt; selectionValues.indexOf(option) &gt; -1
      );
    }
</option>