title: How to make chips using bootstrap 4 in input field
body: <p>I am trying to make and input field with drop-down,the input field is of <code>type=email</code> in the drop-down i am getting mail ids from my database what i am trying to do is when user clicks on any drop-down it gets  populated into that input field but drop-down should not close becauseit is a multi-select dropdown when ever user focus-out from the drop-down it gets closed</p>
  
  <p>When user selects any drop-down that option should get selected or checked</p>
  
  <p>and inside that input field it can come as chip or token as how it comes in gmail when we enter more then one mail ids</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
  
  
  &lt;div class="input-group mt-3 mb-3"&gt;
  
    &lt;input type="email" class="form-control" placeholder="mail id"&gt;
    &lt;div class="input-group-prepend"&gt;
      &lt;button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown"&gt;
       Email id
      &lt;/button&gt;
      &lt;div class="dropdown-menu"&gt;
        &lt;a class="dropdown-item" href="#"&gt;abc@gmail.com&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;egf@gmail.com&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;123@gmail.com&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and in input field email should come as <code>chips</code></p>