Form text input filtered on a datalist, AJAX style

Wappler General How To
#1

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.

Turn Autocomplete into Autosuggest?
Autocomplete issue with maintaining a static input value
Ajax Autocomplete
Ajax Autocomplete
#2

After a quick look, do you have the optionvalue as it should?
I think you have to dmx-bind it too

#4

I effectively copied the syntax of a select as it is almost identical other than only a value is needed, not a text entry.

Also wondering if i could just use the google API to interface with maps as i want to allow the user to pick a location, currently limiting it to a list but could be opened up to the entire google lookup. Any API guys out there want a challenge?

for info, the client wants to do something like on here.

#5

Will try to reproduce your code to see if I spot anything.

#6

here is a link to my local server.
http://mat.findmystudentdigs.co.uk/utilities/listhandler.php

#7

I got it. Wait… sending you more details

#8 
 <form id="form1">
      <input type="text" name="filter2" list="selector">
  <datalist id="selector" is="dmx-repeat" dmx-bind:repeat="serverconnect1.data.query1">
    <option dmx-bind:optionvalue="yes_no_name">{{yes_no_name}}</option>
  </datalist>
</form>
1 Like
#9

1.datalist is a repeat region
2. inside the<option> , dmx-bind:optionvalue so it renders all optionvalue with their respective value from the repeat
3. between the <option></option> just bind the value which is equal to the dmx-bind:optionvalue

Tested it and it works, if you have issues let me know.
Thanks!

2 Likes
#10

Huge thanks @t11, out at moment but will test when home.

1 Like
#11

I have it working perfect on my site

image
image.png1524×602 97.9 KB

image
image.png1920×1040 85.4 KB

image
image.png1920×1040 130 KB

1 Like
#12

Thanks Adriano, i knew some of you guys could save me hours messing about with variations of data bindings.

1 Like