Mobile Age - Component - AutoComplete

A input field with autocomplete functionality

How to create an input field with autocomplete-functionality

  1. Use HTML code to specify a container with a unique id
    <div id="unique_id"> ... some html used if JS doesn't work ... </div>
  2. Use a JavaScript array to initialize your list with the required options, e.g. the data server's url etc.
    <script> var options = { formLabel: 'Luxembourg\'s Places: ', formName: "cities", wrapperLabel: "", wrapperInput: "", wrapperStatus: "", bem: true, bemBlock: "ma-autocomplete", xhrMethod: "GET", xhrSource: "https://mobileage.ftb-esv.de/frontend/php/data.placesLU.php", dataLimit: 7, clientFiltering: true }; <script>
  3. Create a new autocomplete object, where as first parameter is the selector specifing the html container. The second parameter is the array of the actually used options.
    <script> new MobileAge.Component.AutoComplete("unique_id", options); <script>

Example 1: Web-Resource - Clientside filtering

Example: A simple autocomplete reading a single JSON array from a net resource. Filtering of the displayed items after each keystroke on the client side.

Code

<div id="auto_complete-1"> <label for="id_autocomplete-1">Label:</label><input type="text" name="id_autocomplete-1" id="id_autocomplete-1"/> </div> <script> var options = { formLabel: 'Luxembourg\'s Places: ', formName: "cities", wrapperLabel: "", wrapperInput: "", wrapperStatus: "", bem: true, bemBlock: "ma-autocomplete", xhrMethod: "GET", xhrSource: "https://mobileage.ftb-esv.de/frontend/php/data.placesLU.php", dataLimit: 7, clientFiltering: true }; new MobileAge.Component.AutoComplete("auto_complete-1", options); </script>

Result

Example 2: Web-Resource from OGD - Serverside filtering

Example: A simple autocomplete reading JSON arrays from a net resource after each keystroke. Filtering of the displayed items on the server side.

Code

<div id="auto_complete-2"> <label for="id_autocomplete-2">Label:</label><input type="text" name="id_autocomplete-2" id="id_autocomplete-2"/> </div> <script> var options = { formLabel: 'Zaragoza Farmacias: ', formName: "farmacias", wrapperLabel: "", wrapperInput: "", wrapperStatus: "", bem: true, bemBlock: "ma-autocomplete", xhrMethod: "GET", xhrSource: "http://83.212.100.226/ogd/datasets/data/venues/?format=json&page_size=15&dataset_id=27", dataLimit: 7, dataPath: "results", dataKey: "name", clientFiltering: false }; new MobileAge.Component.AutoComplete("auto_complete-2", options); </script>

Result

Example 3: Web-Resource - Serverside filtering

Example: A simple autocomplete reading JSON arrays from a net resource after each keystroke. Filtering of the displayed items on the server side.

Code

<div id="auto_complete-3"> <label for="id_autocomplete-3">Label:</label><input type="text" name="id_autocomplete-3" id="id_autocomplete-3"/> </div> <script> var options2 = { formLabel: 'British Places: ', formName: "place", formValue: "", formPlaceholder: "City/Town/Place", wrapperLabel: "", wrapperInput: "", wrapperStatus: "", statusOkay: "Okay", bem: true, bemBlock: "ma-autocomplete", xhrMethod: "GET", xhrSource: "https://mobileage.ftb-esv.de/frontend/php/data.placesUK.php", xhrQuery: { n: "10" }, xhrVar: "q", dataPath: "places", }; new MobileAge.Component.AutoComplete("auto_complete-3", options2); </script>

Result

Options

For a full list of available options, please refer to the Documentation for AutoComplete