Saya mencoba membuat bilah pencarian fungsional di dalam bilah navigasi saya dengan materializecss. Saya dapat meletakkan ikon pencarian dan menulis teks di dalamnya tetapi tidak berfungsi. Saya hanya memiliki bagian desain. Saya tidak dapat menemukan jquery untuk menginisialisasi kotak pencarian dan membuatnya berfungsi.

<ul class="right hide-on-med-and-down">
                        <li>
                            <div class="input-field col s6 s12 white-text">
                                <i class="white-text small material-icons prefix">search</i>
                                <input type="text" placeholder="search" id="autocomplete-input" class="white-text">
                            </div>
                        </li>
</ul>
0
pedro lopez 16 November 2017, 17:02

1 menjawab

Jawaban Terbaik

Anda belum menginisialisasi pelengkapan otomatis dan opsinya dalam file JS. Anda dapat memeriksa kode JS di bawah ini.

Coba jalankan demo di bawah ini, bilah pencarian dengan pelengkapan otomatis yang diterapkan. Anda bisa mendapatkan Apple, Microsoft, dan Google di pelengkapan otomatis bilah pencarian. Untuk opsi lainnya, tambahkan mereka di objek data di bawah inisialisasi pelengkapan otomatis.

var myData={
      "Apple": null,
      "Microsoft": null,
      "Google": 'https://placehold.it/250x250'
    };

$(document).ready(function() {
  $('input.autocomplete').autocomplete({
    data: myData,
    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">Search</label>
      </div>
    </div>
  </div>
</div>
1
Varun Sukheja 14 Desember 2017, 17:25