report-station.xml

<?xml version='1.0' ?>

<t:chloe xmlns:t="http://factorcode.org/chloe/1.0">

	<t:title>Signalement</t:title>

    <p>Signaler une station qui marche ou ne marche pas</p>

	<t:form t:action="$velibwatch-app/report-station">
		<table>
			<tr><th class="field-label">Station: </th><td><t:field t:name="station" /></td></tr>
			<tr><th class="field-label">Type: </th><td><t:choice t:choices="types" t:name="type" /></td></tr>
			<tr><th class="field-label">Username: </th><td><t:field t:name="username" /></td><th class="field-label"> (Optionnel)</th></tr>
		</table>

		<input type="SUBMIT" value="Envoyer" />
	</t:form>

        <script
        src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
        integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
        crossorigin="anonymous"></script>
        <script>
          var link = document.createElement('link');
          link.setAttribute('rel', 'stylesheet');
          link.setAttribute('type', 'text/css');
          link.setAttribute('href', 'http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css');
          document.getElementsByTagName('head')[0].appendChild(link);
          $( function() {
            $.getJSON( "stations.json", function( data ) {
              var autocomplete_codes = data.map(function(e) {
                return {
                  "value": e.station.code,
                  "name": e.station.name,
                  "label": e.station.code + " - " + e.station.name
                };
              }).sort(function (a, b) {
                return a.value.localeCompare(b.value);
              });
              $( "input[name=station]" ).autocomplete({
                source: function(request, response) {
                  response(
                      autocomplete_codes.filter(function(el) {
                          return el.value.startsWith(request.term);
                      }).concat(
                      autocomplete_codes.filter(function(el) {
                          return el.name.toLowerCase().includes(request.term.toLowerCase());
                      }))
                  );
                }
              });
            });
          } );
        </script>
</t:chloe>