<commit_before><title>&lt;datalist-&gt;</title>

<script src=/snuggsi.es></script>
<script name=polyfill src=https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.0/webcomponents-hi-ce.js></script>

<link rel=stylesheet href=https://devpunks.herokuapp.com/typography.css>

<!-- import works inline body -->
<link rel=import href=/examples/header-group>
<!--
  <header-group>
    <h2 slot=header>&lt;datalist-&gt;</h2>
    <p slot=subheader>
      <a title='See more component examples' href=/examples>See more component examples</a>
      <br>
      <a target=external href=https://jqueryui.com/autocomplete/>Inspired by jquery autocomplete</a>
      <em><a target=external href=https://github.com/dyve/jquery-autocomplete/blob/master/src/jquery.autocomplete.js>(Source Code)</a></em>
    </p>
  </header-group>
-->

<input list=foo>

<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist -->
<datalist id=foo>

  <select multiple>
    <!-- <option disabled selected value>Select Option -->
    <!-- https://stackoverflow.com/questions/8605516/default-select-option-as-blank#answer-23638053 -->

    <!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option -->
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup -->
    <option title=Female>Female
    <option title=Male>Male
    <option>Male Whatever the hell someone damn well chooses to be
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup -->
    <optgroup label=LGBTM>
      <option disabled value=Transgender>T
    </optgroup>
    <optgroup disabled label=Aliens>
      <!-- quirk with Firefox for selectable option nested within disabled optgroup -->
      <option value=Mars>Alien
    </optgroup>
  </select>
</datalist>

<datalist->
  <!-- can have phrasing content - https://html.spec.whatwg.org/multipage/dom.html#phrasing-content-2 -->
  <template>
  <!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li -->
  <li>
    <label><input value={value} type={type}>{name}</label>
  </template>
</datalist->

<style>
option:after {
    content: attr(title);
    background: #666;
    color: #fff;
    position: absolute;
    width: 100%;
    left: 0;
    border: none;
}
</style>

<script>

Element `datalist-` // https://html.spec.whatwg.org/multipage/form-elements.html#the-datalist-element

(class extends HTMLElement {

  initialize (datalists = document.querySelectorAll `datalist`) {
    for (let datalist of datalists)
      !!! ('options' in datalist)
        && this.polyfill (datalist)
  }

  polyfill (datalist) {
    const
      select =
        datalist.querySelector `select`

    , input =
        document.querySelector (`[list=${datalist.id}]`)

    , options =
        datalist.querySelectorAll
          `option:not(:disabled)`



    this.fixate (input, datalist, select)

    // polyfill HTMLDataList.options
    datalist.hidden  = true
    datalist.options = Array.from (options)

    select.addEventListener
      ('change',
        (event, select = event.target) =>
          (input.value = select.value)
            && (select.selectedIndex = -1)
              && (datalist.hidden = true))

    var that = this
    input.addEventListener
      ('focus', () => that.fixate (input, datalist, select))
  }

  fixate (input, datalist, select) {
    const
      rect  = input.getBoundingClientRect ()
    , left  = rect.left
    , width = rect.width // perhaps auto with min-width
    , top   = rect.bottom // - rect.height // ??? Dunno why have to subtract height

    // should be a way to set style object
    select.style.margin  = 0
    select.style.padding = 0
    select.style.minWidth = width

    // should be a way to set style object
    datalist.style.top = top
    datalist.style.left = left
    datalist.style.position = 'absolute'
  }
})

</script>

<script src=/browser-sync.es></script><commit_msg>Fix styling declaration for select<commit_after><title>&lt;datalist-&gt;</title>

<script src=/snuggsi.es></script>
<script name=polyfill src=https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.0/webcomponents-hi-ce.js></script>

<link rel=stylesheet href=https://devpunks.herokuapp.com/typography.css>

<!-- import works inline body -->
<link rel=import href=/examples/header-group>
<!--
  <header-group>
    <h2 slot=header>&lt;datalist-&gt;</h2>
    <p slot=subheader>
      <a title='See more component examples' href=/examples>See more component examples</a>
      <br>
      <a target=external href=https://jqueryui.com/autocomplete/>Inspired by jquery autocomplete</a>
      <em><a target=external href=https://github.com/dyve/jquery-autocomplete/blob/master/src/jquery.autocomplete.js>(Source Code)</a></em>
    </p>
  </header-group>
-->

<input list=foo>

<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist -->
<datalist id=foo>

  <select multiple>
    <!-- <option disabled selected value>Select Option -->
    <!-- https://stackoverflow.com/questions/8605516/default-select-option-as-blank#answer-23638053 -->

    <!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option -->
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup -->
    <option title=Female>Female
    <option title=Male>Male
    <option>Male Whatever the hell someone damn well chooses to be
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup -->
    <optgroup label=LGBTM>
      <option disabled value=Transgender>T
    </optgroup>
    <optgroup disabled label=Aliens>
      <!-- quirk with Firefox for selectable option nested within disabled optgroup -->
      <option value=Mars>Alien
    </optgroup>
  </select>
</datalist>

<datalist->
  <!-- can have phrasing content - https://html.spec.whatwg.org/multipage/dom.html#phrasing-content-2 -->
  <template>
  <!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li -->
  <li>
    <label><input value={value} type={type}>{name}</label>
  </template>
</datalist->

<style>
option:after {
    content: attr(title);
    background: #666;
    color: #fff;
    position: absolute;
    width: 100%;
    left: 0;
    border: none;
}
</style>

<script>

Element `datalist-` // https://html.spec.whatwg.org/multipage/form-elements.html#the-datalist-element

(class extends HTMLElement {

  initialize (datalists = document.querySelectorAll `datalist`) {
    for (let datalist of datalists)
      !!! ('options' in datalist)
        && this.polyfill (datalist)
  }

  polyfill (datalist) {
    const
      select =
        datalist.querySelector `select`

    , input =
        document.querySelector (`[list=${datalist.id}]`)

    , options =
        datalist.querySelectorAll
          `option:not(:disabled)`



    this.fixate (input, datalist, select)

    // polyfill HTMLDataList.options
    datalist.hidden  = true
    datalist.options = Array.from (options)

    select.addEventListener
      ('change',
        (event, select = event.target) =>
          (input.value = select.value)
            && (select.selectedIndex = -1)
              && (datalist.hidden = true))

    var that = this
    input.addEventListener
      ('focus', () => that.fixate (input, datalist, select))
  }

  fixate (input, datalist, select) {
    const
      rect  = input.getBoundingClientRect ()
    , left  = rect.left
    , width = rect.width // perhaps auto with min-width
    , top   = rect.bottom // - rect.height // ??? Dunno why have to subtract height

    // should be a way to set style object
    select.style.margin  = 0
    select.style.padding = 0
    select.style.minWidth = width

    // should be a way to set style object
    select.style.top = top
    select.style.left = left
    select.style.position = 'absolute'
    datalist.hidden = false
  }
})

</script>

<script src=/browser-sync.es></script>
{'fraction_non_alphanumeric': 0.15467212066981975, 'fraction_numerical': 0.007925348331842004, 'mean_word_length': 2.94553706505295, 'pattern_counts': {'":': 0, '<': 129, '<?xml version=': 0, '>': 133, 'https://': 24, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 2, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6861258', 'n_tokens_mistral': 2644, 'n_tokens_neox': 2514, 'n_words': 499}