As far as I'm aware, there is no standard to apply a [`<datalist>`][1] to random elements with the [`[contenteditable]`][2] attribute, or anything other than a input with the [`[list]`][3] attribute.  At best, you'd be beholden to how individual browsers choose to implement that spec.

Obviously, the best medicine is to convert to semantically correct html, but just adding that note for future visitors to do if possible, since that's not your use case.

A possible workaround is to spin up an `input` element during the `focusin` event, match the styling of the surrounding span, allow the native browser events to fire, and apply the updated value when the input loses focus.

Here's how that would look in JavaScript:

```js
document.addEventListener('focusin', function (event) {
	if (event.target.matches('[contenteditable]')) {
        var editable = event.target
        
        // get text
        var text = editable.innerText

        // create input
        var input = document.createElement("input");
        input.type = "text";
        input.className = "editable-mirror";
        input.setAttribute("list", "browsers");
        input.value = text;

        editable.appendChild(input);

		input.focus()
	}
});
document.addEventListener('focusout', function (event) {
    if (event.target.matches('.editable-mirror')) {
        var input = event.target
        var editable = input.closest("[contenteditable]")

        // get text
        var text = input.value;

        // destroy input
        input.parentNode.removeChild(input);

        // apply value
        editable.innerText = text;
    }
});
```

And some starter styles (although Your Mileage May Vary)

```css
[contenteditable] {
  position: relative;
  border: 1px solid silver;
  padding: 2px 5px;
  display: inline-block;
}

.editable-mirror {
    position: absolute;
    left: -1px;
    top: -1px;
    height: calc(100% + 2px);
    width: calc(100% + 7px);
    padding: 2px 5px;
    margin: 0;
    border: 0;
}
```

### Here's a working demo in Stack Snippets & [JSFiddle][4]





    document.addEventListener('focusin', function (event) {
    	if (event.target.matches('[contenteditable]')) {
            console.log('focused')

            var editable = event.target

            // enter edit mode
            editable.classList.add("editing")
            
            // get text
            var text = editable.innerText

            // create input
            var input = document.createElement("input");
            input.type = "text";
            input.className = "editable-mirror";
            input.setAttribute("list", "browsers");
            input.value = text;

            editable.appendChild(input);

            input.focus()
            
    	}
    }, false);
    document.addEventListener('focusout', function (event) {
        if (event.target.matches('.editable-mirror')) {
            console.log('blur')
            
            var input = event.target
            var editable = input.closest("[contenteditable]")

            // leave edit mode
            editable.classList.remove("editing")

            // get text
            var text = input.value;

            // destroy input
            input.parentNode.removeChild(input);

            // apply value
            editable.innerText = text;
        }
    }, false);



    [contenteditable] {
      position: relative;
      border: 1px solid silver;
      padding: 2px 5px;
    }

    .editable-mirror {
        position: absolute;
        left: -1px;
        top: -1px;
        height: calc(100% + 2px);
        width: calc(100% + 12px);
        padding: 2px 5px;
        margin: 0;
        border: 0;
        font: inherit;
    }




    <h2>Regular - Input + Datalist</h2>
    <label>Choose a browser from this list:
    <input type="text" list="browsers" placeholder="Edit Me" id="regular" /></label>

    <datalist id="browsers">
      <option value="Chrome"/>
      <option value="Firefox"/>
      <option value="Internet Explorer"/>
      <option value="Opera"/>
      <option value="Safari"/>
      <option value="Microsoft Edge"/>
    </datalist>

    <h2>Workaround - ContentEditable + Datalist</h2>

    <label>Choose a browser from this list:
    <span contenteditable list="browsers" name="myBrowser">edit me</span></label>



[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
[2]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable
[3]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-list
[4]: https://jsfiddle.net/KyleMit/j4frex23/

I would like to know if there's any hackable way anyone might know of which will allow an HTML [datalist][1] element to work with a `contenteditable` element and **not with an `<input>` element**. 

## Example code:

```html
<label>Choose a browser from this list:
  <span contenteditable list="browsers" name="myBrowser">choose</span> 
</label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>
```

[fiddle demo][2]

It would seem like it is bound to only with with `<input>` element.
In my situation I have javascript plugin which hides an input field and replaces it with a `span`, for some "special" things that can only be done with a regular DOM element, such as `span`. This span is `contenteditable` and acts is a simulation for the input it replaces, while the input is kept hidden.


  [1]: https://developer.mozilla.org/en/docs/Web/HTML/Element/datalist
  [2]: https://jsfiddle.net/rq2zL8qg/