选择自动完成输入值会转到链接

Question

我希望我的网站加载新页面，具体取决于用户从自动填充字段中选择的内容。例如，如果您选择“艺术学院”，则页面上包含有关学校负荷的信息，但是如果您选择“历史学校”，则页面将加载不同的页面。

到目前为止，我具有自动完成功能，并编写了一个函数，可以根据您选择的选项转到其他页面，但实际上并没有转到该页面。

控制台中没有任何错误，因此我不确定如何找到我的代码哪一部分是错误的。

谢谢

function autocomplete(inp, arr) {
  var currentFocus;

  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;

      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;

      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");

      this.parentNode.appendChild(a);

      for (i = 0; i < arr.length; i++) {
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {

          b = document.createElement("DIV");
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          b.addEventListener("click", function(e) {
              inp.value = this.getElementsByTagName("input")[0].value;
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });

  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        currentFocus++;
        addActive(x);
      } else if (e.keyCode == 38) { //up
        currentFocus--;
        addActive(x);
      } else if (e.keyCode == 13) {
        e.preventDefault();
        if (currentFocus > -1) {
          if (x) x[currentFocus].click();
        }
      }
  });


    function button(text) {
      var string = "";
      document.getElementById("tags").value = 'Go to your Department';
      text  = text.toLowerCase();
      switch(text){  
          case 'kent school of architecture':
              string = 'architecture';
              break;
          case 'school of arts':
              string = 'arts';
              break;
          case 'school of english':
              string = 'english';
              break;
          case 'school of european culture and languages':
              string = 'ecl';
              break;
           case 'school of history':
              string = 'hist';
              break;
          case 'school of music and fine art':
              string = 'mfa';
              break;
          default:
              string = '';
          }
          if (string != ''){
          window.location.href = "https://"+ string;    
    }
    else{
      window.location.reload();
    }
  };

  function addActive(x) {
    if (!x) return false;
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    x[currentFocus].classList.add("autocomplete-active");
  }

  function removeActive(x) {
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }

  function closeAllLists(elmnt) {
    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]);
      }
    }
  }

  document.addEventListener("click", function (e) {
      closeAllLists(e.target);
  });
  }

var schools = [ "Kent School of Architecture","School of Arts","School of English","School of European Culture and Languages", "School of History", "School of Music and Fine Art"];

autocomplete(document.getElementById("tags"), schools);

$(document).ready(function() {
  $('#tagsautocomplete-list').click( function() {
    var text = document.getElementById("tags").value
    document.getElementById("tags").value = 'Go to your Department';
    button(text);
  })
});

我的html：

<div class="input-group">
              <input name="tags" id="tags" autocomplete="on" class="form-control ui-autocomplete-input form-control-md" type="text" placeholder="Enter your school name...">
    <div id="tagsautocomplete-list" class="autocomplete-items"><div><strong>School of Art</strong>s<input type="hidden" value="School of Arts"></div></div>
</div>

谢谢！

Answer 1

这是我的做法：

  function button(text) {
  var string = "";
  document.getElementById("tags").value = 'Go to your Department';
  text  = text.toLowerCase();
  switch(text){  
      case 'kent school of architecture':
          string = 'architecture';
          break;
      case 'school of arts':
          string = 'arts';
          break;
      case 'school of english':
          string = 'english';
          break;
      case 'school of european culture and languages':
          string = 'ecl';
          break;
       case 'school of history':
          string = 'hist';
          break;
      case 'school of music and fine art':
          string = 'mfa';
          break;
      default:
          string = '';
      }
      if (string != ''){
      window.location.href = "https://kentunion.co.uk/"+ string;    
}
else{
  window.location.reload();
}
};


function autocomplete(inp, arr) {
  var currentFocus;

  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;

      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;

      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");

      this.parentNode.appendChild(a);

      for (i = 0; i < arr.length; i++) {
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {

          b = document.createElement("DIV");
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          b.addEventListener("click", function(e) {
              inp.value = this.getElementsByTagName("input")[0].value;
              closeAllLists();
              button(inp.value);
          });
          a.appendChild(b);
        }
      }
  });

  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        currentFocus++;
        addActive(x);
      } else if (e.keyCode == 38) { //up
        currentFocus--;
        addActive(x);
      } else if (e.keyCode == 13) {
        e.preventDefault();
        if (currentFocus > -1) {
          if (x) x[currentFocus].click();
        }
      }
  });




  function addActive(x) {
    if (!x) return false;
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    x[currentFocus].classList.add("autocomplete-active");
  }

  function removeActive(x) {
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }

  function closeAllLists(elmnt) {
    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]);
      }
    }
  }

  document.addEventListener("click", function (e) {
      closeAllLists(e.target);
  });
  }


var schools = [ "Kent School of Architecture","School of Arts","School of English","School of European Culture and Languages", "School of History", "School of Music and Fine Art"];

autocomplete(document.getElementById("tags"), schools);

您在except the one passed as an argument:*/中遇到语法错误。评论未正确打开。

我删除了.click，因为它不再需要了（见下文）。

您的.button()函数是在.autocomplete()函数中定义的，因此.click()无法调用它。

我将.button()函数移到了autocomplete()函数的外部，以防万一您想使用它，尽管即使您将其放在原处，我的解决方案也仍然可以使用。

最后，我更改了代码以在.button()内调用b.addEventListener("click", function(e)，因为这将导致在填充tags字段后立即进行重定向。

旁注：如WillardSolutions所述，请不要使用string作为变量名;）。