像 Basecamp 一样自动完成？

Question

我目前正在学习网站设计，我已经开始创建自己的类似 Basecamp 的网站（项目管理工具）。我需要像 Basecamp 这样的自动完成输入 javascript 的插件或教程...但是我不确定如何设置它，因为我是 javascript 的超级新手并且仍在尝试让我全神贯注。

Answer 1

使用 Semantic UI 的下拉模块中的多重搜索选择功能： https://semantic-ui.com/modules/dropdown.html#multiple-search-selection

这是一个示例 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>

您需要在代码中引用以下内容才能使用此库： 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

像 Basecamp 一样自动完成？

Autocomplete like Basecamp?

javascript

autocomplete

basecamp