Search code examples
javascriptautocompletebasecamp

Autocomplete like Basecamp?

I'm currently learning website design, I have started creating my own Basecamp like website (project management tool). I am in need of a plugin or a tutorial on autocomplete input javascript like Basecamp... however i'm unsure on how to set this up as i'm super new to javascript and still trying to get my head around it all.

enter image description here

Solution

  • Use the multiple search selection feature from Semantic UI's dropdown module: https://semantic-ui.com/modules/dropdown.html#multiple-search-selection

    Here's a sample jsfiddle: https://jsfiddle.net/9wnjra1z/

    <form class="ui form">
  <div class="field">
      <label>Assigned to</label>
      <div class="ui fluid multiple search selection dropdown">
        <input type="hidden" name="users" />
        <i class="dropdown icon"></i>
        <div class="default text">Select Users</div>
        <div class="menu">
          <div class="item" data-value="kristin_aardsma">
            <img class="ui avatar image" src="https://semantic-ui.com/images/avatar/small/jenny.jpg">
            <span>Kristin Aardsma</span>
          </div>
          <div class="item" data-value="jonny_cyrus">
            <img class="ui avatar image" src="https://semantic-ui.com/images/avatar/small/elliot.jpg">
            <span>Jonny Cyrus</span>
          </div>
          <div class="item" data-value="stevie">
            <img class="ui avatar image" src="https://semantic-ui.com/images/avatar/small/stevie.jpg">
            <span>Stevie</span>
          </div>
          <div class="item" data-value="matt">
            <img class="ui avatar image" src="https://semantic-ui.com/images/avatar/small/matt.jpg">
            <span>Matt</span>
          </div>
        </div>
      </div>
  </div>
</form>

    You will need the following references in your code to use this library: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js

    https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css

    https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js