We need a auto complete is very used

Feature Request
#1

We need a auto complete is very used.

Ex: https://www.dmxzone.com/go/14111/ajax-autocomplete/

1 Like
2018: The Year in Review
Component equal to datalis
#2

I presume that you are seeking to auto complete the input values in a form. In that case, HTML5 can take care of that for you. Have a look at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

To use it, have a look at https://www.w3schools.com/tags/att_input_autocomplete.asp

#3

It would be nice to have an auto complete also dynamically from a database table or query.

#4

Hi adicarlo,

This is a thought, so you can be assured that I do not know what I am talking about, but I’ll give it a go. :thinking:

I think that App Connect Data Formatter should be able to do the auto complete using data from the database. After all, it can even do a fussy search as this video shows https://www.dmxzone.com/go/32812/using-the-fuzzysearch-filter-in-dmxzone-app-connect-data-formatter. The formatter has a filter for ‘contains’ and ‘starts with’ to make the search more exact.

1 Like
#5

I have solved this with a datalist and used repeat child in the datalist to populate from databindings.

4 Likes
#6

how did you do with the datalist?

#7

The datalist is a solution when the dataset is not to large. There is no datalist component, but you can add it using the DOM. See https://www.w3schools.com/tags/tag_datalist.asp for more information about the datalist tag.

#8

Problem with this is its not supported is Safari and Internet Explorer 9 and earlier versions.

#9

I know, that Safari still doesn’t support the tag is strange, but IE9 and earlier has a share of less then 1%. Several App Connect components also require minimal IE10.

#10

here is how i use it, and the serverconnect query is about 300 records long…

<div class="form-group col-md-4">
<label>Unit model</label>
<input name="unitmodel" type="text" class="form-control" id="unitmodel" form="equipmentprofile" placeholder="" list="prjEquip" dmx-bind:value="{{equipquery.data.prjEquipDetails[0].unitmodel}}">
<datalist id="prjEquip" is="dmx-repeat" dmx-bind:repeat="equipquery.data.equipOptions">
<option dmx-bind:value="{{itemname}}" id="repeat1" dmx-bind:label="{{itemname}}"></option>
</datalist> </div>
3 Likes
#11

Hi.
Has there been any update in Wappler with regards to this Auto Complete feature?
Datalist is not an option as the dataset is large. Or, can anyone please share any ideas to integrate such functionality in Wappler?

#12

Sample for autocomplete when using with large datasets, example uses the search api from the forum and fills the options dynamically with the results.

<!doctype html>
<html>
  <head>
    <title>Example</title>
    <script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script>
  </head>
  <body is="dmx-app" id="app">
    <dmx-api-datasource id="api1" is="dmx-fetch" url="https://community.wappler.io/search.json" dmx-param:q="search.value" noload="noload"></dmx-api-datasource>
    <input type="text" id="search" placeholder="Type Something" list="searchresults" autocomplete="off" dmx-on:input.debounce:100="api1.load({})">
    <datalist id="searchresults">
      <option dmx-repeat="api1.data.topics" dmx-bind:value="id">{{title}}</option>
    </datalist>
  </body>
</html>
7 Likes
Autocomplete Input Field
Autocomplete Input Field
#13

Thanks for the code @patrick
I ended up populating a select html control on textbox input using server connect.
Code here: How to Use Data Detail Component

DataList on Chrome doesn’t work well in my opinion. It shows the value part in the list and on selecting an item, value is shown in the textbox instead of text.
And, biggest of all, I could not work with the selected item in list in Wappler. It just shows the value of selected item in textbox and input event gets invoked again, calling the api with an invalid value.

#14

A auto complete Wappler component would be perfect. @patrick this is very easy for you :slight_smile: please rs

1 Like
#15

Autocomplete component is now available in Wappler 2.2.5

1 Like
#16

Such perfect timing! This was my first purchase at DMX Zone and what then lead on to discovering the seriously awesome team behind the Extensions, then via evolution and progress here to Wappler. Almost feels like a full circle but I know there is always more to come! Astonishing!!

Thank you!

3 Likes
#17