What is the corresponding tag for html datalist in Lightning .?

Question

We can use dataList tag in html.While using datalist,it is suggested that the user select one of the options you've given, but he can actually enter anything he wants in the input.Is there any tag corresponding to datalist in lightning.?

eg. code in html.

<input list="browsers" name="browser">
 <datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
</datalist>

this works in html.but not in lightning component.Thanks in advance.

Answer 1

I think what you want is the Select form element. Here's some sample code from the Lightning Design System Component Form Section.

<div class="slds-form-element">
    <label class="slds-form-element__label" for="select-01">Select Label</label>
    <div class="slds-form-element__control">
      <div class="slds-select_container">
        <select id="select-01" class="slds-select">
          <option>Option One</option>
          <option>Option Two</option>
          <option>Option Three</option>
        </select>
      </div>
    </div>
  </div>

EDIT

Upon reflection, after reading your question again, it appears the above wouldn't totally satisfy your requirements of being able to enter text to replace what's already there before selecting it. So, I think you'd need to modify a checkbox list along the lines of what's below.

<fieldset class="slds-form-element">
  <legend class="form-element__legend slds-form-element__label">Checkbox Group label</legend>
  <div class="slds-form-element__control" for"browsers">
    <label class="slds-checkbox" >
      <input name="default" type="checkbox" id="browsers" />
      <span class="slds-checkbox--faux"></span>
      <span class="slds-form-element__label">each browser in list would appear here next to a checkbox</span>
  </div>
</fieldset>

You might need to add a .slds-form--inline and/or a .slds-input where the text above is at in order to be able to change the in-line text.

Note: The above has not been tested. See the link referenced above for more details on each command and what their usage.