материализацияcss автозаполнение onchange - PullRequest
Новая
       6

материализацияcss автозаполнение onchange

0 голосов
/ 25 мая 2018

Я пытаюсь использовать элемент материализации автозаполнения. Я правильно извлекаю элементы автозаполнения, но они не появляются, когда я вхожу в начало предложения: кажется, данные загружаются, но когда я пытаюсь обновить экземпляр (например, instance.open)) если не получитсякак я мог справиться с этим?С уважением 

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

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>


<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" onkeypress="valueChange(this);">
        <label for="autocomplete-input">Autocomplete</label>
      </div>
    </div>
  </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.autocomplete');
        var instances = M.Autocomplete.init(elems, {});
    });

    function valueChange(elem) {
        var instance = M.Autocomplete.getInstance(elem);

        console.log("search for " + elem.value);
        axios.post("<%= test_autocomplete_search_path %>", {
            search: elem.value,
            authenticity_token: '<%= form_authenticity_token %>',
        })
        .then(function (response) {
            var map = new Object();
            for (bcl = 0; bcl < response.data.length; bcl ++) {
                map[response.data[bcl].town] = null;
            }
            if (response.data.length > 0) {
                console.log(map);
                instance.updateData(map);
instance.open(); FAIL HERE
            }
        })
        .catch(function (error) {
            alert(error);
        });
    };
</script>
...