Браузер не может найти функцию, возможно, ошибка с внутренним вызовом из внешнего файла? - PullRequest
Новая
       12

Браузер не может найти функцию, возможно, ошибка с внутренним вызовом из внешнего файла?

0 голосов
/ 18 февраля 2019

Я получаю сообщение об ошибке «Uncaught TypeError:« x »не является функцией».Я полагаю, что это может иметь отношение к тому, как я вызываю функцию внутри HTML, но сохраняю функцию из внешнего файла, но все мои исследования показывают, что это вообще не должно быть проблемой.

Я даже поместил ссылку на скрипт на внешнюю ссылку выше в html-файл на случай, если каскадная загрузка вызывает вызов функции до того, как она будет найдена там, где она определена, но я считаю, что javascript на самом деле не так... сделать это?

Я сделал много проблем по этому вопросу, и каждый проверяющий, который я пробовал, говорит, что мой JS чист, и я изменил имя функции с «автозаполнение» на «searchBar»надеясь, что автозаполнение - это зарезервированное слово или что-то, но не игра в кости.

Я также получил ту же ошибку с фрагментом кода stackoverflow, хотя я вызываю функцию в том же документе после она была определена, так что теперь я не уверен, чтовопрос может быть? 

function searchBar(arr) {

  var currentFocus,
      inp = $(this),
      wrapper = $('.autocomplete-wrapper');

  // when triggering input is changed, run function
  $(this).change(function() {
    var a = $(this).sibling().find('.autocomplete-item-wrapper'),
        b,
        i,
        val = $(this).value;

    closeAllLists();

    if (!val) return false;

    currentFocus = -1;

    for (i = 0; i < arr.length; i++) {
      if (arr[i].substring(0, val.length).toUpperCase() == val.toUpperCase()) {
        // creates a div element for each matching element
        b = document.createElement('div');

        // makes the matching letters bold
        b.html("<strong>" + arr[i].substring(0, val.length) + "</strong");
        b.innerHTML += arr[i].substring(val.length);

        // inserts a input field that will hold the current array item's value
        b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";

        // inserts the item into the input when clicked
        b.click(function(e) {
            inp.value = this.getElementsByTagName("input")[0].value;
            closeAllLists();
        });
        a.append(b);
      };
    };
  });

  inp.keydown(function(e) {
    var x = a;
    if (x) x = x.getElementsByTagName("div");
    if (e.keyCode == 40) { // arrow down
      currentFocus++;
      /*and and make the current item more visible:*/
      addActive(x);
    }
    else if (e.keyCode == 38) { //up
      /*If the arrow UP key is pressed,
      decrease the currentFocus variable:*/
      currentFocus--;
      /*and and make the current item more visible:*/
      addActive(x);
    }
    else if (e.keyCode == 13) {
      /*If the ENTER key is pressed, prevent the form from being submitted,*/
      e.preventDefault();
      // if (currentFocus > -1) {
      //   /*and simulate a click on the "active" item:*/
      //   if (x) x[currentFocus].click();
      // }
    }
  });

  function addActive(x) {
    // a function to classify an item as "active"
    if (!x) return false;

    // start by removing the "active" class on all items
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    /*add class "autocomplete-active":*/
    x[currentFocus].classList.add("autocomplete-active");
  };

  function removeActive(x) {
    /*a function to remove the "active" class from all autocomplete items:*/
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  };

  function closeAllLists(elmnt) {
    /*close all autocomplete lists in the document,
    except the one passed as an argument:*/
    var x = document.getElementsByClassName("autocomplete-items");
    for (var i = 0; i < x.length; i++) {
      if (elmnt != x[i] && elmnt != inp) {
        x[i].parentNode.removeChild(x[i]);
      }
    }
  };
};


var options = ["acorn squash","alfredo sauce","alligator","almond extract","almonds","anchovy","anchovy paste","angelica","apple butter","applesauce","apricots","artichokes","baking soda","barbecue sauce"];

$("#searchbar").searchBar('options');
body {
  font-size: 16px;
  background: #f6f6f6;
}

.search::after {
  content: '';
  display:table;
  clear: both;
}

.search {
  width: 300px;
  margin: 5rem auto;
}

input {
  height: 3rem;
  display: block;
  float: left;
  border: none;
  outline: none;
}

input[type="search"] {
  width: calc(100% - 4rem);
  padding: 1rem;
  box-sizing: border-box;
  border: 1px solid #e0e0e0;
}

input[type="submit"] {
  width: 4rem;
  background: DodgerBlue;
  color: white;
}
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

<div class="search">
  <input id="searchbar" type="search">
  <input type="submit">
  <div class="autocomplete-wrapper">
    <div class="autocomplete-item-wrapper">
    </div>
  </div>
</div>

<!-- For the sake of showing how I'm linking files and calling the function.
<!-- jQuery - - >
<script src="js/jquery-3.3.1.min.js"></script>

<!-- Autocomplete - - >
<script src="js/search-autocomplete.js"></script>


<script>
  var options = {
     url: "js/searchterms.js"
  };

  $("#searchbar").searchBar('options');
</script> -->
</body>

Этот код в значительной степени соответствует учебному пособию W3School по созданию автозаполнения.

...