2016-08-31 12 views
2

materialize의 자동 완성을 테스트 중이지만 어떤 이유로 작동하지 않습니다. 나는 몇 가지를 시도하기위한 한Materialize 자동 완성이 작동하지 않습니다.

<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> 

:이하려고하면 다른 양식이 테스트를했는데 어떤 이유로이 작업을 수행

<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> 

: 여기

내 코드입니다 어떤 이유로는 작동하지 않습니다.

+0

사용 자동 완성에 대한 답을 찾을 수 있습니다 http://stackoverflow.com/a/43133503/3295819 – Bharathiraja

답변

1

당신은

코드의 라인 위
<input class="purple darken-4" id="autocomplete-input" class="autocomplete" type="search"> 

클래스의 속성과 두 번째 클래스의 특성이 고려되지 않은 두, 그냥 하나 개의 클래스 속성에 모든 클래스를 결합 포함 코드에서 작은 실수를 만들었습니다.

<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>