1
検索バーには良い提案があり、矢印キーを使用してオプションを移動する必要がありますが、機能しないため、あなたは私を助けてくれますか？私は今、このようなものと何日も戦っています。検索候補を移動するには矢印キーを使用する必要があります
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>
代わり – Venky
マットの西のブログhttp://blog.teamtreehouse.com/creating-autocomplete-dropdownsリストを使用してのドロップダウンを使用してみてください-datalist-elementがあなたを助けてくれるかもしれないhttp://codepen.io/matt-west/full/jKnzG – Venky
私はドロップダウンを試みましたが、うまくいきません。上の検索は完璧です、私はあまりにも選択する矢印キーを使用することができる必要があり、それは完璧だろう。 –