2016-08-31 1 views
2

Je teste la saisie semi-automatique, mais se matérialisent cela ne fonctionne pas pour une raison quelconque.Materialise autocomplete ne fonctionne pas

voici mon code:

<link type="text/css" rel="stylesheet" href="css/style.css"/> 
<title>Stamboom</title> 
<link rel="stylesheet" href="css/materialize.css"> 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script> 

     <div class="input-field"> 
        <input class="purple darken-4" id="autocomplete-input" class="autocomplete" type="search"> 
        <label for="autocomplete-input"><i class="material-icons">search</i></label> 
        <i class="material-icons">close</i> 
     </div> 
<script> 
$(document).ready(function(){ 
$('input.autocomplete').autocomplete({ 
    data: { 
    "Apple": null, 
    "Microsoft": null, 
    "Google": 'http://placehold.it/250x250' 
    } 
}); 
}); 
</script> 

Je l'ai testé cela avec une autre forme et pour quelque raison que cela ne fonctionne quand j'essaie ceci:

<div class="row"> 
    <div class="col s12"> 
     <div class="row"> 
     <div class="input-field col s12"> 
      <i class="material-icons prefix">textsms</i> 
      <input type="text" id="autocomplete-input" class="autocomplete"> 
      <label for="autocomplete-input">Autocomplete</label> 
     </div> 
     </div> 
    </div> 
    </div> 
<script> 
    $(document).ready(function(){ 
    $('input.autocomplete').autocomplete({ 
     data: { 
     "Apple": null, 
     "Microsoft": null, 
     "Google": 'http://placehold.it/250x250' 
     } 
    }); 
    }); 
    </script> 

J'ai essayé plusieurs choses et une raison quelconque, ça ne marche pas.

+0

Vous pouvez trouver une réponse à l'aide de saisie semi-automatique http://stackoverflow.com/a/43133503/3295819 – Bharathiraja

Répondre

1

Vous avez fait erreur mineure dans votre code

<input class="purple darken-4" id="autocomplete-input" class="autocomplete" type="search"> 

Au-dessus de ligne de code contiennent deux attributs de classe et deuxième attribut de classe ne sont pas pris en compte, toutes les classes Juste moissonneuse-batteuse dans un attribut de classe.

<input class="purple darken-4 autocomplete" id="autocomplete-input" type="search"> 

$(document).ready(function(){ 
 
    $('input.autocomplete').autocomplete({ 
 
    data: { 
 
\t "Apple": null, 
 
\t "Microsoft": null, 
 
\t "Google": 'http://placehold.it/250x250' 
 
\t } 
 
    }); 
 
});
<!DOCTYPE html> 
 

 
<html> 
 
<head> 
 
<title>Stamboom</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="input-field"> 
 
\t <input class="purple darken-4 autocomplete" id="autocomplete-input" type="search"> 
 
\t <label for="autocomplete-input"><i class="material-icons">search</i></label> 
 
\t <i class="material-icons">close</i> 
 
\t </div> 
 
</body> 
 
</html>