Les suggestions Datalist s'affichent pour une zone de texte non liée dans Chrome

Question

Ok, le div avec le problème est le suivant.

<table id="torFormContainer"> 
      <tbody><tr> 
       <th colspan="2"> 
        New Time Off Request 
       </th> 
      </tr> 
      <tr id="supebox"> 
       <td> 
        *Supervisor: 
       </td> 
       <td> 
        <input name="supe" id="supe" type="text" list="supes" required=""> 
        <datalist id="supes"> 
<option value="Ashley Helms"> 
    </option><option value="Dan Boling"> 
    </option><option value="Daniel Jenkins"> 
    </option><option value="Hannah Amos"> 
    </option><option value="Keith Underwood"> 
    </option><option value="Shane Smith"> 
    </option><option value="Wade Horton"> 
    </option></datalist> 

       </td> 
      </tr> 
      <tr id="sdatebox"> 
       <td class="left"> 
        *Start Date: 
       </td> 
       <td class="right"> 
        <input type="date" id="sdate" name="sdate" min="2014-06-11" onblur="testSdate();" onchange="testSdate();" placeholder="YYYY-MM-DD" required=""> 
       </td> 
      </tr> 
      <tr id="edatebox"> 
       <td class="left"> 
        *End Date: 
       </td> 
       <td class="right"> 
        <input id="edate" name="edate" type="date" onblur="testEdate();" onchange="testEdate();" placeholder="YYYY-MM-DD" required=""> 
       </td> 
      </tr> 
      <tr id="reasonbox"> 
       <td class="left"> 
        *Reason: 
       </td> 
       <td class="right"> 
        <select id="reason" name="reason" required=""> 
         <option value="0" disabled="true">Select a Reason</option> 
         <option value="3">Comp</option> 
<option value="6">Death in Family</option> 
<option value="4">Family Leave</option> 
<option value="5">Personal Leave</option> 
<option value="2">Sickness</option> 
<option value="1">Vacation</option> 

        </select> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        Comment: 
       </td> 
       <td> 
        <textarea id="comment" placeholder="Optional" rows="5" cols="30"></textarea> 
       </td> 
      </tr> 
      <tr> 
       <td class="left" id="required"> 
        *Required 
       </td> 
       <td id="submit"> 
        <input id="torSub" type="button" value="Submit" onclick="torPreSubmit();"> 
       </td> 
      </tr> 
     </tbody></table> 

Pour une raison quelconque, et pour autant que je peux voir, que dans Chrome, après avoir fait le nom du superviseur, le textarea montre également la liste des suggestions de la liste des superviseurs. Maintenant, il peut très bien être quelque chose de stupide que j'ai oublié, et il y a quelques vérifications sur les dates et etc, mais je ne peux pas pour la vie de moi comprendre cela. Certains de la jquery ci-dessous.

function torPreSubmit(){  
     var submit = true; 
     if($('#sdate').val()===""){ 
      $('#sdatebox').css('outline','thin solid red'); 
      console.log("sdate fail"); 
      submit = false; 
     }else{ 
      console.log("sdate pass"); 
      $('#sdatebox').css('outline',''); 
     } 
     if($('#edate').val()===""){ 
      $('#edatebox').css('outline','thin solid red'); 
      console.log("edate fail"); 
      submit = false; 
     }else{ 
      console.log("edate pass"); 
      $('#edatebox').css('outline',''); 
     } 
     if($('#supe').val()===""){ 
      $('#supebox').css('outline','thin solid red'); 
      console.log("supe fail"); 
      submit = false; 
     }else{ 
      console.log("supe pass"); 
      $('#supebox').css('outline',''); 
     } 
     if($('#reason').val()===null){ 
      console.log("reason fail"); 
      $('#reasonbox').css('outline','thin solid red'); 
      submit = false; 
     }else{ 
      console.log("reason pass"); 
      $('#reasonbox').css('outline',''); 
     } 
     if(submit){ 
      torSubmit(); 
      $('#reasonbox').css('outline',''); 
      $('#edatebox').css('outline',''); 
      $('#sdatebox').css('outline',''); 
     } 
    } 

function testSdate(){ 
    $("#edate").val(''); 
    if(Date.parse($("#sdate").val())<=Date.today()){ 
     $('#sdate').val(''); 
    }else{ 
     $('#edate').attr('min',$("#sdate").val()); 
    } 
} 

function testEdate(){ 
    if((Date.parse($("#edate").val())<Date.today())||(Date.parse($("#edate").val())<Date.parse($("#sdate").val()))){ 
     $('#edate').val(''); 
    } 
} 

Answer 1

Nous vous suggérons de vérifier la version du navigateur chrome, les listes de données ont un problème avec la version du navigateur 35 et ci-dessous. Ils l'ont corrigé dans leur version bêta 36, ​​vous devrez télécharger ici https://www.google.com/intl/en/chrome/browser/index.html?extra=betachannel#eula cela mettra à jour votre navigateur et le site fonctionnera en douceur ... !!!

Hope this helps

.. Vive