templates/v_card/_search.html.twig line 1

Open in your IDE?
  1.  <div class="col-md-3">
  2.     </div>
  3.         <div class="col-md-9">
  5.                 <div class="tab-pane" id="cv-form">
  6.                     <div class="card shadow mb-4">
  7.                         <!-- div class="card-header bg-primary text-white text-center">
  8.                             <h3 class="mb-0">Formulaire de carte de visite</h3>
  9.                         </div -->
  10.                         <div class="card-body card-preview">
  11.                 <div class="logo-etab"></div>
  12.                 <div class="search_spacer"></div>
  13.                             <form id="search_form" name="v_card" action="#">
  14.                 <div class="form-group row align-items-center autocomplete">
  15.                     <label id="search_label" for="email" class="col-sm-4 col-form-label">Rechercher une carte:</label>
  16.                     <div class="col-sm-8 d-flex">
  17.                         <input type="text" class="form-control" id="search_field" name="email" placeholder="Entrez un email" title="Veuillez saisir une adresse email valide"/>
  18.                     </div>
  19.                     <ul id="searchResult">
  21.                     </ul>
  22.             <div id="search_error" class="msg-error">Aucun résultat....</div>
  23.                 </div>
  26.                 <!-- div><input type=search name="email"/></div-->
  27.                     <hr/>
  29.                                             <button type="submit" id="search_btn" class="btn btn-primary">Rechercher</button>
  30. <script>
  32.     function addSuggestions(target, datas) {
  33.         let idx, len;
  34.         if (target !== null) {
  35.             for (let item in datas) {
  36.                 if (item != undefined
  37.                     && document.getElementById(datas[item]['EMAIL_PRO']) === null
  38.                 ) {
  39.                     let new_li = document.createElement('li');
  40.                     new_li.setAttribute('value', datas[item]['EMAIL_PRO']);
  41.                     new_li.innerText = datas[item]['EMAIL_PRO'];
  43.                     new_li.id = datas[item]['EMAIL_PRO'];
  44.     
  45.                     target.appendChild(new_li);
  46.                 }
  47.             }
  48.         }
  49.     }
  50.     
  51.     function connectSearchResult() {
  52.     let search_res = document.getElementById("searchResult").onclick = function(evt) {
  53.         let text_value = evt.target.getAttribute('value');
  54.         
  55.         console.log('click:' + text_value);
  56.         document.getElementById("search_field").value = text_value;
  58.         
  59.         document.getElementById("searchResult").innerHTML = '';
  60.     
  61.     };
  62.     }
  64.     // addSuggestions(document.getElementById('searchResult'), ["un", "deuz", "trois", "quatre"]);
  65.     connectSearchResult();
  66. </script>
  67.                 <div class="social-media-block">
  68. <div class="inner-block">
  69. <ul class="social-media-links--platforms platforms">
  70.       <li>
  71.       <a class="social-media-link-icon--facebook_" href="https://www.facebook.com//AMParisTech" target="_blank">
  72.         <span class="fab fa-facebook fa-2x"></span>
  73.       </a>
  75.           </li>
  76.       <li>
  77.       <a class="social-media-link-icon--tiktok" href="https://www.tiktok.com/@artsetmetiers" target="_blank">
  78.         <span class="fab fa-tiktok fa-2x"></span>
  79.       </a>
  81.           </li>
  82.       <li>
  83.       <a class="social-media-link-icon--twitter" href="https://www.twitter.com/ArtsetMetiers_" target="_blank">
  84.         <span class="fab fa-twitter fa-2x"></span>
  85.       </a>
  87.           </li>
  88.       <li>
  89.       <a class="social-media-link-icon--youtube" href="https://www.youtube.com/ARTSETMETIERSCOM" target="_blank">
  90.         <span class="fab fa-youtube fa-2x"></span>
  91.       </a>
  93.           </li>
  94.       <li>
  95.       <a class="social-media-link-icon--linkedin" href="https://www.linkedin.com/school/arts-et-m-tiers-paristech/" target="_blank">
  96.         <span class="fab fa-linkedin fa-2x"></span>
  97.       </a>
  99.           </li>
  100.       <li>
  101.       <a class="social-media-link-icon--instagram" href="https://www.instagram.com/artsetmetiers_ensam" target="_blank">
  102.         <span class="fab fa-instagram fa-2x"></span>
  103.       </a>
  105.           </li>
  106.       <li>
  107.       <a class="social-media-link-icon--rss" href="/fr/actualites.xml" target="_blank">
  108.         <span class="fa fa-rss fa-2x"></span>
  109.       </a>
  111.           </li>
  112.   </ul>
  113. <div class="root-site-url">artsetmetiers.fr</div>
  114.           </div>
  115. </div>
  117.                             </form>
  118.                         </div>
  119.                     </div>
  120.                 </div>
  121.     </div><!-- class="col-md-3" //-->
  122. <script>
  123.     var vcard_tab = document.getElementById('cv-tab');
  125.     if (vcard_tab !== null) {
  126.         vcard_tab.onclick = function(evt) {
  127.                 evt.preventDefault();
  128.                 window.location = '/v/card/';
  129.             };
  130.     }
  132.     var
  133.         search_form = document.getElementById('search_form'),
  134.         search_btn = document.getElementById('search_btn'),
  135.         search_field = document.getElementById('search_field'),
  136.         error_div = document.getElementById('search_error')
  137.     ;
  140.     if (search_field !== null
  141.        ) {
  142.         search_field.onkeyup = function(evt) {
  143.             if (search_field.value != ''
  144.                    && search_field.value.length > 2
  145.            ) {
  146.                 let search_res = document.getElementById('searchResult');
  147.                 if (search_res !== null) {
  148.                     search_res.innerHTML = '';
  149.             $.ajax({
  150.                       type: "POST",
  151.                     dataType: 'json',
  152.                       url: 'search',
  153.                       data: '&email=' + search_field.value,
  154.                       success: function(ans) {
  155.                         if (ans !== null
  156.                         ) {
  157.                             let len = ans.len;
  158.                             console.log('search: ' + ans[0]['EMAIL_PRO']);
  159.                             addSuggestions(document.getElementById('searchResult'), ans);
  160.                         }
  161.                     },
  162.                 });
  163.                 } // END if search_res
  164.             }
  165.         };
  166.     }
  168.     if (search_form !== null
  169.         // && search_btn !== null
  170.         // && search_field !== null
  171.     ) {
  172.         search_form.onsubmit = function(evt) {
  173.                 evt.preventDefault();
  175.                 let email = search_field.value;
  176.             window.location = '/v/card/last/?email=' + email {%if needs_auth is not defined%} + '&back=search'{%endif%};
  178. /*
  179.             if (error_div !== null) {
  180.                 error_div.style.display = 'none';
  181.             }
  183.                 $.ajax({
  184.                       type: "POST",
  185.                       url: 'search',
  186.                       data: '&email=' + email,
  187.                       success: function(ans) {
  188.                         if (ans !== null
  189.                             && ans['EMAIL_PRO']
  190.                         ) {
  191.                             window.location = '/v/card/last/?email=' + email {%if needs_auth is defined%} + '&back=search'{%endif%};
  192.                         } else {
  193.                             if (error_div !== null) {
  194.                                 error_div.style.display = 'block';
  195.                             }
  196.                         }
  197.                     },
  198.   
  199. });
  200. */
  201.             };
  202.     }
  204. </script>