Question 189044 in Html Question posted in
Some basic documentation can be found here.

Html – Hello, does anyone know the general concepts in making a text bubble in a textfield? Sort of like Gmail

I am trying to build an application where I can invite others into a group.
I want to make a textfield that can turn mails into this like gmail.
enter image description here

Does anyone know the general concept behind this? Thank you!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    As commented by Darryl Noakes, this concept is called a Tag Input. Hence if you want to look for how to implement something like this, Google it up.

    This is the resource I am using as I am using react and MUI https://blog.theashishmaurya.me/how-to-create-a-tag-input-feature-in-reactjs-and-material-ui


  2. 0

    According to the element inspector, it looks like it uses a combination of CSS classes and JS plugins.
    For example, the HTML looks like this with 2 entries :

    .afx {
  display: flex;
}

.agh {
  display: flex;
}

.agb {
  display: inline-flex;
}

.afV {
  display: inline-block;
}

.afW {
  display: flex;
}
    <div class="afx" peoplekit-id="pQPeT" tabindex="-1" role="listbox" aria-multiselectable="true" aria-orientation="horizontal" aria-label="Champ de recherche">
  <div draggable="true" peoplekit-id="Svajxe" class="agh">
    <div peoplekit-id="ubaLBe" class="agb">
      <div role="option" class="afV ajf " id=":vm" peoplekit-id="XPtOyb" data-hovercard-id="[email protected]" data-name="" aria-describedby=":vm-db" pk-log=":vn;25286;impression;" data-hovercard-owner-id="56">
        <div class="afW WeJhwb">
          <div class="af2">
            <div class="afK">
              <div class="biZ" peoplekit-id="d6MZcd">
                <div class="aLO" style="width: 24px; height: 24px">
                  <div peoplekit-id="YLEF4c" class="afD" style="width: 24px; height: 24px">
                    <div class="afF">
                      <div peoplekit-id="IHgMKc" class="afI">
                        <img peoplekit-id="HiaYvf" class="afH" style="width: 24px; height: 24px;" data-preload-src="https://www.gstatic.com/people/peoplekit/icons/light_theme/out_of_domain_yellow500.svg" data-src="https://www.gstatic.com/people/peoplekit/icons/light_theme/out_of_domain_yellow500.svg" data-backup-src="https://lh3.googleusercontent.com/a/default-user=s30-p" draggable="false" alt="" src="https://www.gstatic.com/people/peoplekit/icons/light_theme/out_of_domain_yellow500.svg">
                      </div>
                    </div>
                  </div>
                  <div peoplekit-id="Btuy5e" class="aLd">
                    <img class="aLX" peoplekit-id="m6fZne" draggable="false" alt="">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="afT">
            <div class="af0">
              <div class="afZ af1">
                <div class="akl" translate="no">[email protected]</div>
                <div class="akk" peoplekit-id="hyPgpe" translate="no"></div>
              </div>
            </div>
          </div>
          <div class="af6">
            <div id=":vm-db" peoplekit-id="bxvLg" class="afX" aria-hidden="true" aria-label="Appuyez sur &quot;Supprimer&quot; pour supprimer ce chip">
              <svg xmlns="https://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" class="afY">
              <path d="M0 0h24v24H0z" fill="none"></path><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
              </svg>
            </div>
          </div>
        </div>
        <div peoplekit-id="QL45qe"></div>
      </div>
    </div>
  </div>
  <div draggable="true" peoplekit-id="Svajxe" class="agh">
    <div peoplekit-id="ubaLBe" class="agb">
      <div role="option" class="afV ajf " id=":w5" peoplekit-id="XPtOyb" data-hovercard-id="[email protected]" data-name="" aria-describedby=":w5-db" pk-log=":w6;25286;impression;">
        <div class="afW WeJhwb">
          <div class="af2">
            <div class="afK">
              <div class="biZ" peoplekit-id="d6MZcd">
                <div class="aLO" style="width: 24px; height: 24px">
                  <div peoplekit-id="YLEF4c" class="afD" style="width: 24px; height: 24px">
                    <div class="afF">
                      <div peoplekit-id="IHgMKc" class="afI">
                        <img peoplekit-id="HiaYvf" class="afH" style="width: 24px; height: 24px;" data-preload-src="https://www.gstatic.com/people/peoplekit/icons/light_theme/out_of_domain_yellow500.svg" data-src="https://www.gstatic.com/people/peoplekit/icons/light_theme/out_of_domain_yellow500.svg" data-backup-src="https://lh3.googleusercontent.com/a/default-user=s30-p" draggable="false" alt="" src="https://www.gstatic.com/people/peoplekit/icons/light_theme/out_of_domain_yellow500.svg">
                      </div>
                    </div>
                  </div>
                  <div peoplekit-id="Btuy5e" class="aLd">
                    <img class="aLX" peoplekit-id="m6fZne" draggable="false" alt="">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="afT">
            <div class="af0">
              <div class="afZ af1">
                <div class="akl" translate="no">[email protected]</div><div class="akk" peoplekit-id="hyPgpe" translate="no"></div></div></div></div><div class="af6">
                  <div id=":w5-db" peoplekit-id="bxvLg" class="afX" aria-hidden="true" aria-label="Appuyez sur &quot;Supprimer&quot; pour supprimer ce chip">
                    <svg xmlns="https://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" class="afY">
                    <path d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>
                  </div>
                </div>
              </div>
              <div peoplekit-id="QL45qe"></div>
            </div>
          </div>
        </div>
        <div class="aH9" style="height: 36px; flex-basis: 48px;" role="presentation">
          <input id=":si" class="agP aFw" peoplekit-id="BbVjBd" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" aria-label="" aria-autocomplete="list" aria-haspopup="listbox" aria-expanded="false" placeholder="" size="0" type="text" role="combobox" aria-owns=":sk" aria-controls=":sk">
          <span class="aIa aFw" peoplekit-id="nl4wje"></span>
      </div>
    </div>

    For some practical reason, I have not rewriten the full CSS rules, nor the JS logic, but this is the base component they use.
    Also, it’s when you click of an element of the list that it changes the classical text view to circled one.
    The input is decated each time a new email is entered.

    I don’t know if this was what you want, but for "general concept", I think I have explained you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search