templates/form/searchform.html.twig line 1

Open in your IDE?
  1. <div class="row mt-4">
  2.     <div class="col">
  3.         <div class="card card-body">
  4.             {{ form_start(form, { 'attr': {'class': 'row'} }) }}
  5.             <!--<form autocomplete="off" class="row" method="get" action="html/pages/all-spaces.html">-->
  6.             <div class="col-12 col-lg-5">
  7.                 <div class="form-group mb-lg-0">
  8.                     <div class="input-group input-group-lg mb-lg-0">
  9.                         <div class="input-group-prepend">
  10.                             <span class="input-group-text"><i class="fas fa-search"></i></span>
  11.                         </div>
  12.                         {{ form_widget(form.location, {'attr': {'class': 'form-control autocomplete', 'placeholder': 'Ville', 'onFocus' : 'geolocate()' }}) }}
  14.                     </div>
  15.                     {{ form_widget(form.locationhidden)}}
  16.                     {{ form_widget(form.placeid)}}
  17.                 </div>
  18.             </div>
  19.             <div class="col-12 col-lg-4">
  20.                 <div class="input-group input-group-lg mb-3 mb-lg-0">
  21.                     <div class="input-group-prepend">
  22.                         <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
  23.                     </div>
  24.                     {{ form_widget(form.date, {'attr': {'class': 'form-control datepicker', 'placeholder': 'Date', 'data-date-format':'dd/mm/yyyy'}}) }}
  25.                     <!--<input class="form-control datepicker" placeholder="Select date" type="text" required>-->
  26.                 </div>
  27.             </div>
  28.             <div class="col-12 col-lg-3">
  29.                 {{ form_widget(form.search, {'attr': {'class': 'btn btn-lg btn-primary btn-block mt-3 mt-md-0 animate-up-2' }} ) }}
  30.                 <!--<button class="btn btn-lg btn-primary btn-block mt-3 mt-md-0 animate-up-2" type="submit">Find a desk</button>-->
  31.             </div>
  32.             {{form_end(form)}}
  33.         </div>
  34.     </div>
  35. </div>
  36. <script>
  37.     var placeSearch, autocompleteinput;
  38.     var input = document.getElementById('festival_search_location');
  39.     var componentForm = {
  40.         street_number: 'short_name',
  41.         route: 'long_name',
  42.         locality: 'long_name',
  43.         administrative_area_level_1: 'short_name',
  44.         country: 'long_name',
  45.         postal_code: 'short_name'
  46.     };
  50.     function initAutocomplete() {
  52.         google.maps.event.addDomListener(input, 'blur', function() {
  53.             if (jQuery('.pac-item:hover').length === 0) {
  54.                 google.maps.event.trigger(this, 'focus', {});
  55.                 google.maps.event.trigger(this, 'keydown', {
  56.                     keyCode: 13
  57.                 });
  58.             }
  59.         })
  61.         // Create the autocomplete object, restricting the search to geographical
  62.         // location types.
  63.         autocompleteinput = new google.maps.places.Autocomplete(
  64.             /** @type {!HTMLInputElement} */
  65.             (input), {
  66.                 types: ['geocode']
  67.             });
  71.         // When the user selects an address from the dropdown, populate the address
  72.         // fields in the form.
  73.         autocompleteinput.addListener('place_changed', fillInAddress);
  76.     }
  78.     function fillInAddress() {
  79.         // Get the place details from the autocomplete object.
  80.         var place = autocompleteinput.getPlace();
  82.         if (place != null && place.place_id) {
  83.             //fill the hidden data
  84.             document.getElementById('festival_search_locationhidden').setAttribute('value', document.getElementById('festival_search_location').value)
  85.             document.getElementById('festival_search_placeid').setAttribute('value', place.place_id)
  86.         }
  88.     }
  89. </script>
  90. <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyArRqV6iNkruffZtVT2G0iX4kfemd1SQD4&libraries=places&callback=initAutocomplete&sessiontoken={{uuid}}" async defer></script>