Form text input filtered on a datalist, AJAX style

I am trying to bind data to a form text control bound to a datalist. The reason for this is i want to simulate an alax dropdown type search from a text field. While i know i could just simply filter a select via a query based on the text input i want the dropdown to stay open and dipslay results as it is filtered.
I would normally use a text field linked to a datalist to do this

Using static values works exactly as expected i.e.

          <form id="form1">
            <input type="text" name="filter2" list="selector" >
              <datalist id="selector">
                <option value="Hight Street"></option>
                <option value="Low Road"></option>
                <option value="Abbey Road"></option>
                <option value="Classy Crescent"></option>
                <option value="Easy Way"></option>
              </datalist>
          </form>

I am trying to bind the datalist to a server connection.
I have tried various combinations like:

<form id="form2">
      <input type="text" name="filter" list="selector2" autocomplete="off">
      <datalist id="selector2" class="form-control" dmx-bind:options="serverconnect1.data.allagents"  optionvalue="Account_Name"></datalist>
</form>

he output i get from the datalist is:

<datalist id="selector2" class="form-control" optionvalue="Account_Name" options="[object Object]],[object Object],[object Object],[object Object]"></datalist>

I assume i have the data binding completely wrong, can anyone assist in how to do this or an alternative way to trying to achieve an ajax style dropdown filtered on a database query.