Adding an Autocomplete field to a form

DESCRIPTION Example of the Starter application showing a form with an autocomplete field to select a country.

PREREQUISITE The ZnetDK for Mobile Starter Application is installed and configured (go to the Get Started page and follow the given procedure).

STEPS Only three steps are required:

• Step 1: Coding the view in charge of displaying the form with the autocomplete field,
• Step 2: Coding the controller that supplies data to the autocomplete field,
• Step 3: Adding a new item to the App's navigation menu.

DEMONSTRATION See live demo....

Step 1 - Coding the view autocompleteview.php

The view autocompleteview.php must be installed into the INSTALL_DIR/applications/default/app/view/ folder.

• <input id="my-autocomplete"> is the HTML input element used as autocomplete field.
• znetdkMobile.autocomplete.make() is the JS method that changes the input element to an autocomplete field and connect it to the remote PHP controller's action developed in next step 2.
• onSelect() is a JS function called when a country is selected in the autocomplete field.
  This function displays a snackbar message indicating the name of the selected country.
• onRender() is a JS function called before displaying a suggestion of country in the autocomplete field.
  This function customizes the display of the suggestion by showing the country code in bold on the left and the country label on the right in italics.

<form id="barcode-form" class="w3-padding-16">
    <label>Country</label><br>
    <input id="my-autocomplete" class="w3-input w3-border" type="search" placeholder="Type a country name..."><br>
</form>
<script>
    console.log('autocompleteview.php');
    znetdkMobile.autocomplete.make('#my-autocomplete', {
        controller: 'autocompletectrl',
        action: 'suggestions'
    }, onSelect, onRender);

    function onSelect(item) {
        znetdkMobile.messages.showSnackbar('Country <b>' + item.label + '</b> selected');
    }
    function onRender(item) {
        return '<b>' + item.value + '</b> - <i>' + item.label + '</i>';
    }
</script>

Step 2 - Coding the controller autocompletectrl.php

The controller autocompletectrl.php must be installed into the INSTALL_DIR/applications/default/app/controller/ folder.

• The AutocompleteCtrl::action_suggestions() method is the controller's action called by the autocompleteview.php to get the suggestions matching the letters entered in the autocomplete field.
• The countries are read in JSON format from the http://country.io/names.json URL and are converted in PHP array.
• The letters entered in the autocomplete field are passed to the controller's action through the query POST parameter and read through a ZnetDK \Request object.
• The suggestions of countries matching the letters entered in the autocomplete field are returned to the view in JSON format through the ZnetDK \Response object.

<?php
namespace app\controller;

class AutocompleteCtrl extends \AppController {
    static protected function action_suggestions() {
        $response = new \Response();
        $countriesAsJson = file_get_contents("http://country.io/names.json");
        if ($countriesAsJson === FALSE) {
            $response->setCriticalError(NULL, 'Unable to read the countries');
            return $response;
        }
        $allCountries = json_decode($countriesAsJson, TRUE);
        $request = new \Request();
        $suggestions = [];
        if (is_array($allCountries)) {
            foreach($allCountries as $key => $label) {
                if (stripos($label, $request->query) !== FALSE) {
                    $suggestions[] = ['label' => $label, 'value' => $key];
                }
            }
        }
        $response->setResponse($suggestions);
        return $response;
    }
}

Step 3 - Adding "Autocomplete" item to the navigation menu

Finally, to give users access to the autocompleteview.php view, a menu item definition is added into the menu.php script of the Web App (see Get Started | New menu items for more information).

The menu.php script is located into the INSTALL_DIR/applications/default/app/ folder.

static public function initAppMenuItems() {
    
    // ... Here, some menu items...
    
    \MenuManager::addMenuItem(NULL, 'autocompleteview', 'Autocomplete', 'fa-keyboard-o');
    
    // ... Here, other menu items...
    
}