Materializecss自動完成輸入

爲什麼自動完成輸入框的工作任何人有任何想法解決它，我的代碼：Materializecss自動完成輸入

<!DOCTYPE HTML> 

<html lang="en"> 

<head> 

<title>Site Name</title> 

<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"> 

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> 
</head> 

<body> 

    <nav class="blue"> 

    <div class="nav-wrapper"> 

     <a href="/index" class="brand-logo">Site Name</a> 

     <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a> 

     <ul class="right hide-on-med-and-down"> 

     <li><a href="/index">Index</a></li> 


     </ul> 

     <ul class="side-nav" id="mobile-demo"> 

     <li><a href="/index">Index</a></li> 

     </ul> 

    </div> 

    </nav> 
<br><br> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 33 KB --> 

<style> 
.loader { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 10; 
    background: url('/images/480.gif') 50% 50% no-repeat #fff; 
    opacity: 100%; 
} 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$(window).load(function() { 
setTimeout(function(){ 
    $('.loader').remove(); 
}, 3000); 
}); 
</script> 
<div class="loader"><center><br><br><br>Please Wait.<br></center></div> 

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

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script> 
<script> 
$(".button-collapse").sideNav(); 
</script> 
<script> 
    $('.button-collapse').sideNav({ 
     menuWidth: 300, // Default is 300 
     edge: 'right', // Choose the horizontal origin 
     closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor 
     draggable: true, // Choose whether you can drag to open on touch screens, 
     onOpen: function(el) { /* Do Stuff*/}, // A function to be called when sideNav is opened 
     onClose: function(el) { /* Do Stuff*/}, // A function to be called when sideNav is closed 
    } 
); 
</script> 
<script> 
    $('input.autocomplete').autocomplete({ 
    data: { 
     "Apple": null, 
     "Microsoft": null, 
     "Google": 'https://placehold.it/250x250' 
    }, 
    limit: 20, // The max amount of results that can be shown at once. Default: Infinity. 
    onAutocomplete: function(val) { 
     // Callback function when value is autcompleted. 
    }, 
    minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1. 
    }); 
</script> 
</body> 

</html>

我tryed到很多方法，但沒有結果，我也改變樣式表的materializecss版本和腳本但再次沒有工作，我也tryed其他自動完成，但不工作我試過這https://www.codexworld.com/autocomplete-textbox-using-jquery-php-mysql/但不工作與MaterializeCSS。

來源

2017-07-28 Abedin Thaqi

你爲什麼要加載的jQuery **三次**？ – DaveP

DaveP我刪除了所有，我離開只有一個，但再次不工作 –

嘗試添加此：

$(document).ready(function() { 
    [Your code here] 
});

它會等到頁面被執行的代碼之前完全加載。

另外，你有哪個版本的jquery？你說你刪除了3個引用中的2個。

來源

2017-08-23 08:11:04 tigie11

在materializecss自動完成下實施，希望這可以解決您的問題。

$(document).ready(function() { 
 

 
    $('input.autocomplete').autocomplete({ 
 
    data: { 
 
     "Apple": null, 
 
     "Microsoft": null, 
 
     "Google": 'https://placehold.it/250x250' 
 
    }, 
 
    limit: 20, // The max amount of results that can be shown at once. Default: Infinity. 
 
    onAutocomplete: function(val) { 
 
     // Callback function when value is autcompleted. 
 
    }, 
 
    minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1. 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> 
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> 
 

 

 

 
<div class="row"> 
 
    <div class="col s12"> 
 
    <div class="row"> 
 
     <div class="input-field col s12"> 
 
     <i class="material-icons prefix">search</i> 
 
     <input type="text" id="autocomplete-input" class="autocomplete"> 
 
     <label for="autocomplete-input">Autocomplete</label> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-11-19 14:12:22

Materializecss自動完成輸入

回答

相關問題