amélioration de la fonction recherche ajax

.idea/workspace.xml

@@ -7,7 +7,6 @@
       <change beforePath="$PROJECT_DIR$/app/Resources/views/base.html.twig" beforeDir="false" afterPath="$PROJECT_DIR$/app/Resources/views/base.html.twig" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/app/config/config.yml" beforeDir="false" afterPath="$PROJECT_DIR$/app/config/config.yml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/AppBundle/Controller/AjaxController.php" beforeDir="false" afterPath="$PROJECT_DIR$/src/AppBundle/Controller/AjaxController.php" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/AppBundle/Entity/Film.php" beforeDir="false" afterPath="$PROJECT_DIR$/src/AppBundle/Entity/Film.php" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/AppBundle/Form/FilmType.php" beforeDir="false" afterPath="$PROJECT_DIR$/src/AppBundle/Form/FilmType.php" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/AppBundle/Form/RealisateurType.php" beforeDir="false" afterPath="$PROJECT_DIR$/src/AppBundle/Form/RealisateurType.php" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/AppBundle/Resources/views/videotheque/liste.html.twig" beforeDir="false" afterPath="$PROJECT_DIR$/src/AppBundle/Resources/views/videotheque/liste.html.twig" afterDir="false" />
@@ -40,7 +39,7 @@
           <entry key="html" value="1" />
           <entry key="json" value="1" />
           <entry key="php" value="13" />
-          <entry key="twig" value="10" />
+          <entry key="twig" value="12" />
           <entry key="yml" value="3" />
         </counts>
       </usages-collector>
@@ -49,21 +48,21 @@
           <entry key="HTML" value="1" />
           <entry key="JSON" value="1" />
           <entry key="PHP" value="13" />
-          <entry key="Twig" value="10" />
+          <entry key="Twig" value="12" />
           <entry key="YAML" value="3" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.extensions.edit">
         <counts>
-          <entry key="php" value="2015" />
-          <entry key="twig" value="686" />
+          <entry key="php" value="2016" />
+          <entry key="twig" value="1158" />
           <entry key="yml" value="1" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.edit">
         <counts>
-          <entry key="PHP" value="2015" />
-          <entry key="Twig" value="686" />
+          <entry key="PHP" value="2016" />
+          <entry key="Twig" value="1158" />
           <entry key="YAML" value="1" />
         </counts>
       </usages-collector>
@@ -95,7 +94,16 @@
         <entry file="file://$PROJECT_DIR$/src/AppBundle/Entity/Film.php">
           <provider selected="true" editor-type-id="text-editor">
             <state relative-caret-position="165">
-              <caret line="35" column="19" lean-forward="true" selection-start-line="35" selection-start-column="19" selection-end-line="35" selection-end-column="19" />
+              <caret line="35" column="19" selection-start-line="35" selection-start-column="19" selection-end-line="35" selection-end-column="19" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/src/AppBundle/Resources/views/videotheque/testajax.html.twig">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="105">
+              <caret line="55" column="24" selection-start-line="55" selection-start-column="24" selection-end-line="55" selection-end-column="24" />
             </state>
           </provider>
         </entry>
@@ -129,10 +137,10 @@
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="true">
+      <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/AppBundle/Form/FilmType.php">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="285">
+            <state relative-caret-position="-264">
               <caret line="22" column="27" lean-forward="true" selection-start-line="22" selection-start-column="27" selection-end-line="22" selection-end-column="27" />
               <folding>
                 <element signature="e#34#90#0#PHP" expanded="true" />
@@ -141,15 +149,6 @@
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/app/config/config.yml">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="150">
-              <caret line="40" column="9" lean-forward="true" selection-start-line="40" selection-start-column="9" selection-end-line="40" selection-end-column="9" />
-            </state>
-          </provider>
-        </entry>
-      </file>
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/AppBundle/Resources/views/videotheque/form.html.twig">
           <provider selected="true" editor-type-id="text-editor">
@@ -198,17 +197,17 @@
       <list>
         <option value="$PROJECT_DIR$/src/AppBundle/Resources/views/videotheque/base.html.twig" />
         <option value="$PROJECT_DIR$/src/AppBundle/Controller/AjaxController.php" />
-        <option value="$PROJECT_DIR$/src/AppBundle/Resources/views/videotheque/testajax.html.twig" />
         <option value="$PROJECT_DIR$/src/AppBundle/Resources/views/videotheque/supprimer.html.twig" />
         <option value="$PROJECT_DIR$/app/Resources/views/base.html.twig" />
         <option value="$PROJECT_DIR$/src/AppBundle/Resources/views/videotheque/liste.html.twig" />
         <option value="$PROJECT_DIR$/src/AppBundle/Resources/views/videotheque/modifier.html.twig" />
         <option value="$PROJECT_DIR$/src/AppBundle/Form/RealisateurType.php" />
-        <option value="$PROJECT_DIR$/src/AppBundle/Entity/Film.php" />
         <option value="$PROJECT_DIR$/src/AppBundle/Resources/views/videotheque/form.html.twig" />
         <option value="$PROJECT_DIR$/app/config/config.yml" />
         <option value="$PROJECT_DIR$/src/AppBundle/Controller/VideothequeController.php" />
         <option value="$PROJECT_DIR$/src/AppBundle/Form/FilmType.php" />
+        <option value="$PROJECT_DIR$/src/AppBundle/Entity/Film.php" />
+        <option value="$PROJECT_DIR$/src/AppBundle/Resources/views/videotheque/testajax.html.twig" />
       </list>
     </option>
   </component>
@@ -413,18 +412,18 @@
       <updated>1539955568381</updated>
       <workItem from="1539955571597" duration="339000" />
       <workItem from="1539955933558" duration="3651000" />
-      <workItem from="1540032947542" duration="6576000" />
+      <workItem from="1540032947542" duration="12126000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="10566000" />
+    <option name="totallyTimeSpent" value="16116000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="27" width="1366" height="741" extended-state="6" />
     <editor active="true" />
     <layout>
-      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.25378788" />
+      <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.25378788" />
       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
       <window_info id="Favorites" order="2" side_tool="true" />
       <window_info anchor="bottom" id="Message" order="0" />
@@ -437,8 +436,8 @@
       <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
       <window_info anchor="bottom" id="Database Changes" order="8" show_stripe_button="false" />
       <window_info anchor="bottom" id="Version Control" order="9" show_stripe_button="false" />
-      <window_info anchor="bottom" id="Terminal" order="10" sideWeight="0.49924242" visible="true" weight="0.3283582" />
-      <window_info anchor="bottom" id="Event Log" order="11" sideWeight="0.5007576" side_tool="true" weight="0.3283582" />
+      <window_info anchor="bottom" id="Terminal" order="10" sideWeight="0.49848485" visible="true" weight="0.3283582" />
+      <window_info anchor="bottom" id="Event Log" order="11" sideWeight="0.50151515" side_tool="true" weight="0.3283582" />
       <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
       <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
       <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
@@ -487,16 +486,6 @@
     <entry file="file://$PROJECT_DIR$/src/AppBundle/Tests/Controller/AjaxControllerTest.php">
       <provider selected="true" editor-type-id="text-editor" />
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/AppBundle/Resources/views/videotheque/testajax.html.twig">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="510">
-          <caret line="34" column="55" selection-start-line="34" selection-start-column="55" selection-end-line="34" selection-end-column="55" />
-          <folding>
-            <element signature="e#1014#1026#0#Twig" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/app/Resources/views/base.html.twig">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="390">
@@ -562,18 +551,23 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/AppBundle/Resources/views/videotheque/supprimer.html.twig">
+    <entry file="file://$PROJECT_DIR$/src/AppBundle/Controller/VideothequeController.php">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="135">
-          <caret line="9" column="43" selection-start-line="9" selection-start-column="43" selection-end-line="9" selection-end-column="43" />
+        <state relative-caret-position="156">
+          <caret line="72" column="58" selection-start-line="72" selection-start-column="58" selection-end-line="72" selection-end-column="58" />
           <folding>
-            <element signature="e#12#43#0#Twig" expanded="true" />
+            <element signature="e#40#97#0#PHP" expanded="true" />
+            <element signature="e#2343#2359#1#PHP" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/AppBundle/Entity/Realisateur.php">
-      <provider selected="true" editor-type-id="text-editor" />
+    <entry file="file://$PROJECT_DIR$/src/AppBundle/Entity/Film.php">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="165">
+          <caret line="35" column="19" selection-start-line="35" selection-start-column="19" selection-end-line="35" selection-end-column="19" />
+        </state>
+      </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/src/AppBundle/Resources/views/videotheque/modifier.html.twig">
       <provider selected="true" editor-type-id="text-editor">
@@ -585,27 +579,22 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/AppBundle/Controller/VideothequeController.php">
+    <entry file="file://$PROJECT_DIR$/src/AppBundle/Resources/views/videotheque/supprimer.html.twig">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="156">
-          <caret line="72" column="58" selection-start-line="72" selection-start-column="58" selection-end-line="72" selection-end-column="58" />
+        <state relative-caret-position="135">
+          <caret line="9" column="43" selection-start-line="9" selection-start-column="43" selection-end-line="9" selection-end-column="43" />
           <folding>
-            <element signature="e#40#97#0#PHP" expanded="true" />
-            <element signature="e#2343#2359#1#PHP" expanded="true" />
+            <element signature="e#12#43#0#Twig" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/AppBundle/Entity/Film.php">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="165">
-          <caret line="35" column="19" lean-forward="true" selection-start-line="35" selection-start-column="19" selection-end-line="35" selection-end-column="19" />
-        </state>
-      </provider>
+    <entry file="file://$PROJECT_DIR$/src/AppBundle/Entity/Realisateur.php">
+      <provider selected="true" editor-type-id="text-editor" />
     </entry>
     <entry file="file://$PROJECT_DIR$/src/AppBundle/Form/FilmType.php">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="285">
+        <state relative-caret-position="-264">
           <caret line="22" column="27" lean-forward="true" selection-start-line="22" selection-start-column="27" selection-end-line="22" selection-end-column="27" />
           <folding>
             <element signature="e#34#90#0#PHP" expanded="true" />
@@ -613,5 +602,12 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/src/AppBundle/Resources/views/videotheque/testajax.html.twig">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="105">
+          <caret line="55" column="24" selection-start-line="55" selection-start-column="24" selection-end-line="55" selection-end-column="24" />
+        </state>
+      </provider>
+    </entry>
   </component>
 </project>

src/AppBundle/Resources/views/videotheque/testajax.html.twig

@@ -7,14 +7,13 @@
 
 {% block body %}
 <form method="post" action="">
-    <input type="text" id="mot_cle">
-</form>
+    <label for="mot-cle">Chercher un nom de réalisateur</label>
+    <input list="results" type="text" id="mot_cle" autocomplete="off">
+    <datalist id="results">
 
-<div id="results">
-    <ul class="result">
+    </datalist>
+</form>
 
-    </ul>
-</div>
 {% endblock %}
 
 {% block javascripts %}
@@ -22,50 +21,48 @@
 <script>
 
 $(document).ready( function() {
-        if (!jQuery('body').hasClass('searching')) {
-            $('#mot_cle').keyup(function (e) {
-                var contenu = $('#mot_cle').val();
-                $('#results').html('');
-                if (contenu.length > 2) {
-                    jQuery('#results').addClass('miniload');
-                    jQuery('#results').append('<div id="chargement">Chargement...<div id="spinner" class="spinner"></div></div>');
-                    setTimeout(function() {
-                        $.ajax({
-                            type: 'POST',
-                            url: "{{ path('ajax_requete') }}",
-                            data: 'mot_cle=' + contenu,
-                            success: function (data) {
-                                jQuery('body').addClass('searching');
-                                $('#results').html('');
-                                jQuery('#chargement').remove();
-                                parseJson(data);
-                                return;
-                            },
-                            complete : function(){
-                                jQuery('#chargement').remove();
-                                return jQuery('body').removeClass('searching');
-                            }
-                        });
-                    }, 1000);
-                }
-            });
-        }
-    });
-    
-    function parseJson(data) {
-        console.log (data);
-        let text = "";
-        for (i = 0; i < data.length; i++)
-        {
-            let realisateur = data[i];
-            console.log("OBJECT JSON %o", realisateur);
-            let {id, nom, prenom} = JSON.parse(realisateur);
-            text += prenom + " " + nom + '\n';
-        }
-        $('#results').html(text);
+    if (!$('body').hasClass('searching')) {
+        $('#mot_cle').keyup(function (e) {
+            var contenu = $('#mot_cle').val();
+            //$('#results').html('');
+            if (contenu.length > 2) {
+                //$('#results').addClass('miniload');
+                //$('#results').append('<div id="chargement">Chargement...<div id="spinner" class="spinner"></div></div>');
+                setTimeout(function() {
+                    $.ajax({
+                        type: 'POST',
+                        url: "{{ path('ajax_requete') }}",
+                        data: 'mot_cle=' + contenu,
+                        success: function (data) {
+                            //$('body').addClass('searching');
+                            //$('#results').html('');
+                            //$('#chargement').remove();
+                            parseJson(data);
+                            return;
+                        },
+                        complete: function(){
+                            $('#chargement').remove();
+                            return $('body').removeClass('searching');
+                        }
+                    });
+                }, 1000);
+            }
+        });
     }
+});
+    
+function parseJson(data) {
+    //console.log (data);
+    $('#results').empty();
 
-
+    for (let i = 0; i < data.length; i++) {
+        let realisateur = data[i];
+        //console.log("OBJECT JSON %o", realisateur);
+        let {id, nom, prenom} = JSON.parse(realisateur);
+        let text = prenom + " " + nom;
+        $('#results').append('<option value="'+text+'" />');
+    }
+}
 
 </script>