Question

为什么自动完成输入框的工作任何人都有任何想法修复它，我的代码：

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

我尝试了很多方法，但没有结果，我也改变了样式表和脚本的materializecss版本，但又没有工作，我也尝试了其他自动完成但不工作我尝试了这个https://www.codexworld.com/autocomplete-textbox-using-jquery-php-mysql/但不使用MaterialiseCSS。

Answer 1

尝试添加：

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

在执行代码之前，它将等待页面完全加载。

另外，你有哪个版本的jquery？你说你删除了3个引用中的2个。

Answer 2

在materializecss自动填充下面实现，希望这能解决您的问题。

>>> find_products([1, 1, 5, 5, 5, 5, 5, 1, 1])
(2, 3125)
>>> find_products([1, 1, 1, 1, 1, 0, 0, 0, 0])
(0, 1)
>>> find_products([1, 4, 5, 2, 7, 9, 3, 1, 1])
(1, 2520)

$(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.
  });
});

Materialisecss自动完成输入

2 个答案: