需要使用箭头键来浏览搜索建议

Question

我有一个搜索栏，提供了很好的建议，我需要能够使用箭头键来浏览选项，但它不起作用，我真的很困惑，请你帮帮我，我一直几天来与这些东西作斗争。

var searchIndex = ["404 Error", "Address Bar", "Ajax", "Apache", "Autoresponder", "BitTorrent", "Blog", "Bookmark", "Bot", "Broadband", "Captcha", "Certificate", "Client", "Cloud", "Cloud Computing", "CMS", "Cookie", "CSS", "Cyberspace", "Denial of Service", "DHCP", "Dial-up", "DNS Record", "Domain Name", "Download", "E-mail", "Facebook", "FiOS", "Firewall", "FTP", "Gateway", "Google", "Google Drive", "Gopher", "Hashtag", "Hit", "Home Page", "HTML", "HTTP", "HTTPS", "Hyperlink", "Hypertext", "ICANN", "Inbox", "Internet", "InterNIC", "IP", "IP Address", "IPv4", "IPv6", "IRC", "iSCSI", "ISDN", "ISP", "JavaScript", "jQuery", "Meta Search Engine", "Meta Tag", "Minisite", "Mirror", "Name Server", "Packet", "Page View", "Payload", "Phishing", "POP3", "Protocol", "Scraping", "Search Engine", "Social Networking", "Socket", "Spam", "Spider", "Spoofing", "SSH", "SSL", "Static Website", "Twitter", "XHTML"];

var input = document.getElementById("searchBox"),
  ul = document.getElementById("searchResults"),
  inputTerms, termsArray, prefix, terms, results, sortedResults;


var search = function() {
  inputTerms = input.value.toLowerCase();
  results = [];
  termsArray = inputTerms.split(' ');
  prefix = termsArray.length === 1 ? '' : termsArray.slice(0, -1).join(' ') + ' ';
  terms = termsArray[termsArray.length - 1].toLowerCase();

  for (var i = 0; i < searchIndex.length; i++) {
    var a = searchIndex[i].toLowerCase(),
      t = a.indexOf(terms);

    if (t > -1) {
      results.push(a);
    }
  }

  evaluateResults();
};

var evaluateResults = function() {
  if (results.length > 0 && inputTerms.length > 0 && terms.length !== 0) {
    sortedResults = results.sort(sortResults);
    appendResults();
  } else if (inputTerms.length > 0 && terms.length !== 0) {
    ul.innerHTML = '<li>Whoah! <strong>' +
      inputTerms +
      '</strong> is not in the index. <br><small><a href="http://google.com/search?q=' +
      encodeURIComponent(inputTerms) + '">Try Google?</a></small></li>';

  } else if (inputTerms.length !== 0 && terms.length === 0) {
    return;
  } else {
    clearResults();
  }
};

var sortResults = function(a, b) {
  if (a.indexOf(terms) < b.indexOf(terms)) return -1;
  if (a.indexOf(terms) > b.indexOf(terms)) return 1;
  return 0;
}

var appendResults = function() {
  clearResults();

  for (var i = 0; i < sortedResults.length && i < 5; i++) {
    var li = document.createElement("li"),
      result = prefix +
      sortedResults[i].toLowerCase().replace(terms, '<strong>'+ terms + '</strong>');

    li.innerHTML = result;

    ul.appendChild(li);
  }
  $('li').click(function(e) {
    $('input').val($(this).text());
  });
  if (ul.className !== "term-list") {
    ul.className = "term-list";
  }
};

var clearResults = function() {
  ul.className = "term-list hidden";
  ul.innerHTML = '';
};

input.addEventListener("keyup", search, false);





var li = $('li');
var liSelected;
$(window).keydown(function(e) {
  if (e.which === 40) {
    if (liSelected) {
      liSelected.removeClass('selected');
      next = liSelected.next();
      if (next.length > 0) {
        liSelected = next.addClass('selected');
      } else {
        liSelected = li.eq(0).addClass('selected');
      }
    } else {
      liSelected = li.eq(0).addClass('selected');
    }
  } else if (e.which === 38) {
    if (liSelected) {
      liSelected.removeClass('selected');
      next = liSelected.prev();
      if (next.length > 0) {
        liSelected = next.addClass('selected');
      } else {
        liSelected = li.last().addClass('selected');
      }
    } else {
      liSelected = li.last().addClass('selected');
    }
  }
});

.search-field,
.term-list {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

body {
  text-align: center;
  background: #f2f2f2;
}

.title {
  width: 100%;
  margin: 3em 0 1em;
  text-align: center;
  font-family: "Arvo", "Helvetica Neue", Helvetica, arial, sans-serif;
  font-size: 170%;
  font-weight: 400;
  color: #2a5ba3;
  text-shadow: #fff 1px 1px 0px, #ddd 2px 2px, #ddd 3px 3px 1px;
}

.search-field {
  display: block;
  width: 30%;
  margin: 1em auto 0;
  padding: 0.5em 10px;
  border: 1px solid #999;
  font-size: 130%;
  font-family: "Arvo", "Helvetica Neue", Helvetica, arial, sans-serif;
  font-weight: 400;
  color: #3e8ce0;
}

.term-list {
  list-style: none inside;
  width: 30%;
  margin: 0 auto 2em;
  padding: 5px 10px 0;
  text-align: left;
  color: #777;
  background: #fff;
  border: 1px solid #ddd;
  font-family: "Arvo", "Helvetica Neue", Helvetica, arial, sans-serif;
  font-weight: 400;
}

.term-list li {
  padding: 0.5em 0;
  border-bottom: 1px solid #eee;
}

li.selected {
  background: yellow
}

.term-list strong {
  color: #444;
  font-weight: 700;
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="title">AutoComplete Me</h1>
<input type="text" id="searchBox" class="search-field" autoFocus />
<ul id="searchResults" class="term-list hidden"></ul>

Answer 1

您唯一可以参考li的地方是

var li = $('li');
var liSelected;
$(window).keydown(function(e) { ...

但当时dom中没有添加li，因此$('li')返回零元素。

此外，

您在每次搜索/按键时都失去了对li标签的引用，因为您要从dom中删除li并在搜索后在每个按键上添加新的li。

下面，

var clearResults = function() {
 debugger;
  ul.className = "term-list hidden";
  ul.innerHTML = ''; // Removing all li inside the ul
}

因此，您的旧li变量正在引用现已删除的旧陈旧li。

解决方案：

在appendResults函数中添加新的li之后，您需要更新li变量。

var appendResults = function() {
  clearResults();
  for (var i = 0; i < sortedResults.length && i < 5; i++) {
    var _li = document.createElement("li"),
      result = prefix +
      sortedResults[i].toLowerCase().replace(terms, '<strong>'+ terms + '</strong>');

    _li.innerHTML = result;

    ul.appendChild(_li);
  }

  li = $('li');
  liSelected = li.filter('.selected');
  $('li').click(function(e) {
    $('input').val($(this).text());
  });
  if (ul.className !== "term-list") {
    ul.className = "term-list";
  }
};

此外，您的搜索功能也会在每个键盘上调用，也可用于向下和向上键，您必须检查上下键并返回。

var search = function(e) {
  if(e.which==40||e.which==38) return;
  debugger;
  inputTerms = input.value.toLowerCase();
  results = [];
  termsArray = inputTerms.split(' ');
  prefix = termsArray.length === 1 ? '' : termsArray.slice(0, -1).join(' ') + ' ';
  terms = termsArray[termsArray.length - 1].toLowerCase();

  for (var i = 0; i < searchIndex.length; i++) {
    var a = searchIndex[i].toLowerCase(),
      t = a.indexOf(terms);

    if (t > -1) {
      results.push(a);
    }
  }

  evaluateResults();
};

<强>段

var searchIndex = ["404 Error", "Address Bar", "Ajax", "Apache", "Autoresponder", "BitTorrent", "Blog", "Bookmark", "Bot", "Broadband", "Captcha", "Certificate", "Client", "Cloud", "Cloud Computing", "CMS", "Cookie", "CSS", "Cyberspace", "Denial of Service", "DHCP", "Dial-up", "DNS Record", "Domain Name", "Download", "E-mail", "Facebook", "FiOS", "Firewall", "FTP", "Gateway", "Google", "Google Drive", "Gopher", "Hashtag", "Hit", "Home Page", "HTML", "HTTP", "HTTPS", "Hyperlink", "Hypertext", "ICANN", "Inbox", "Internet", "InterNIC", "IP", "IP Address", "IPv4", "IPv6", "IRC", "iSCSI", "ISDN", "ISP", "JavaScript", "jQuery", "Meta Search Engine", "Meta Tag", "Minisite", "Mirror", "Name Server", "Packet", "Page View", "Payload", "Phishing", "POP3", "Protocol", "Scraping", "Search Engine", "Social Networking", "Socket", "Spam", "Spider", "Spoofing", "SSH", "SSL", "Static Website", "Twitter", "XHTML"];

var input = document.getElementById("searchBox"),
  ul = document.getElementById("searchResults"),
  inputTerms, termsArray, prefix, terms, results, sortedResults;


var search = function(e) {
  if(e.which==40||e.which==38) return;
  inputTerms = input.value.toLowerCase();
  results = [];
  termsArray = inputTerms.split(' ');
  prefix = termsArray.length === 1 ? '' : termsArray.slice(0, -1).join(' ') + ' ';
  terms = termsArray[termsArray.length - 1].toLowerCase();

  for (var i = 0; i < searchIndex.length; i++) {
    var a = searchIndex[i].toLowerCase(),
      t = a.indexOf(terms);

    if (t > -1) {
      results.push(a);
    }
  }

  evaluateResults();
};

var evaluateResults = function() {
  if (results.length > 0 && inputTerms.length > 0 && terms.length !== 0) {
    sortedResults = results.sort(sortResults);
    appendResults();
  } else if (inputTerms.length > 0 && terms.length !== 0) {
    ul.innerHTML = '<li>Whoah! <strong>' +
      inputTerms +
      '</strong> is not in the index. <br><small><a href="http://google.com/search?q=' +
      encodeURIComponent(inputTerms) + '">Try Google?</a></small></li>';

  } else if (inputTerms.length !== 0 && terms.length === 0) {
    return;
  } else {
    clearResults();
  }
};

var sortResults = function(a, b) {
  if (a.indexOf(terms) < b.indexOf(terms)) return -1;
  if (a.indexOf(terms) > b.indexOf(terms)) return 1;
  return 0;
}

var appendResults = function() {
  clearResults();
 debugger;
  for (var i = 0; i < sortedResults.length && i < 5; i++) {
    var _li = document.createElement("li"),
      result = prefix +
      sortedResults[i].toLowerCase().replace(terms, '<strong>'+ terms + '</strong>');

    _li.innerHTML = result;

    ul.appendChild(_li);
  }
  
  li = $('li');  // Update here
  liSelected = li.filter('.selected'); // Update here
  
  $('li').click(function(e) {
    $('input').val($(this).text());
  });
  if (ul.className !== "term-list") {
    ul.className = "term-list";
  }
};

var clearResults = function() {
  ul.className = "term-list hidden";
  ul.innerHTML = '';
};

input.addEventListener("keyup", search, false);





var li = $('li');
var liSelected;
$(window).keydown(function(e) {
  if (e.which === 40) {
    if (liSelected) {
      liSelected.removeClass('selected');
      next = liSelected.next();
      if (next.length > 0) {
        liSelected = next.addClass('selected');
      } else {
        liSelected = li.eq(0).addClass('selected');
      }
    } else {
      liSelected = li.eq(0).addClass('selected');
    }
    liSelected.trigger('click');
  } else if (e.which === 38) {
    if (liSelected) {
      liSelected.removeClass('selected');
      next = liSelected.prev();
      if (next.length > 0) {
        liSelected = next.addClass('selected');
      } else {
        liSelected = li.last().addClass('selected');
      }
    } else {
      liSelected = li.last().addClass('selected');
    }
    liSelected.trigger('click');
  }
  
});

.search-field,
.term-list {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

body {
  text-align: center;
  background: #f2f2f2;
}

.title {
  width: 100%;
  margin: 3em 0 1em;
  text-align: center;
  font-family: "Arvo", "Helvetica Neue", Helvetica, arial, sans-serif;
  font-size: 170%;
  font-weight: 400;
  color: #2a5ba3;
  text-shadow: #fff 1px 1px 0px, #ddd 2px 2px, #ddd 3px 3px 1px;
}

.search-field {
  display: block;
  width: 30%;
  margin: 1em auto 0;
  padding: 0.5em 10px;
  border: 1px solid #999;
  font-size: 130%;
  font-family: "Arvo", "Helvetica Neue", Helvetica, arial, sans-serif;
  font-weight: 400;
  color: #3e8ce0;
}

.term-list {
  list-style: none inside;
  width: 30%;
  margin: 0 auto 2em;
  padding: 5px 10px 0;
  text-align: left;
  color: #777;
  background: #fff;
  border: 1px solid #ddd;
  font-family: "Arvo", "Helvetica Neue", Helvetica, arial, sans-serif;
  font-weight: 400;
}

.term-list li {
  padding: 0.5em 0;
  border-bottom: 1px solid #eee;
}

li.selected {
  background: yellow
}

.term-list strong {
  color: #444;
  font-weight: 700;
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="title">AutoComplete Me</h1>
<input type="text" id="searchBox" class="search-field" autoFocus />
<ul id="searchResults" class="term-list hidden"></ul>