Autocomplete

enhances an input to support server-driven search

Server-driven autocomplete using the browser’s native datalist functionality.

To create an autocomplete, create a normal form input, and call the autocomplete method. It takes several arguments, including the URL, the querystring field name, and transformations methods for creating the datalist.

The URL must return a JSON array of objects.

The result of the title function must include the search content or the browser will hide it.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<input id="input-user" />

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const input = document.getElementById("input-user");
    
    // returns the text description of the object
    const title = function(o) {
      return o["name"] + " (" + o["id"] + ")";
    }
    
    // returns the actual value that will be submitted
    const val = function(o) {
      return o["id"];
    }

    // autocomplete(el: HTMLInputElement, url: string, field: string, title: (x: any) => string, val: (x: any) => string)
    {your project}.autocomplete(input, "/user", "q", title, val);
  });
</script>

If you use the export module in your app, autocompletes will be generated automatically for the relationships of models tagged search.