I'm a total rookie here, and this is my first ever question on here so bare with me as I'm trying to learn! But I'm trying to assign links to each input term from a search index so that when the user searches for that term, they can click the link to have the page scroll to the destination on the page. I may not be approaching this correctly but how can I just simple inject an <a> link wrapper around the #text inside my <li>?
Simply put, it's doing this.
<ul id="searchResults" class="search-list hidden">
<li>apple</li>
</ul>
By pulling its data from this index.
var searchIndex = [
"Apple",
];
But I need it to do this...
<ul id="searchResults" class="search-list hidden">
<li><a href="#apple">apple</a></li>
</ul>
By pulling its data something like this??
var searchIndex = [
name: "Apple", link: "#apple",
];
Here's the code I currently have.
var searchIndex = [
"Apple",
"Banana",
"Cherry",
"Grape",
"Orange",
"Watermelon",
];
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>No fruit terms containing <strong>'
+ inputTerms
+ '</strong> found.</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);
}
if ( ul.className !== "search-list") {
ul.className = "search-list";
}
};
var clearResults = function() {
ul.className = "search-list hidden";
ul.innerHTML = '';
};
input.addEventListener("keyup", search, false);
$(function(){
$('#searchResults').hide();
$('#searchBox').on('focus',function(){
$('#searchResults').show();
});
})
body {
min-height: 100%;
scroll-behavior: smooth;
}
/* Input */
.input {
height: 50px;
width: 100%;
padding: 0px;
font-size: 15px;
text-indent: 16px;
}
/* Search List */
.search-list {
list-style: none inside;
width: 100%;
margin: 10px 0px;
padding: 0px;
border: 1px solid;
}
.search-list li {
padding: .5em 16px;
}
.hidden {
display: none;
}
/* Glossary List */
.glossary {
list-style-type: none;
padding: 0;
margin-top: 30px;
}
.term {
padding: 30px;
border-top: 1px solid;
}
<body>
<section>
<h1>Autocomplete Search Index List</h1>
<input type="text" id="searchBox" class="input" placeholder="Start typing..." autoFocus />
<ul id="searchResults" class="search-list hidden"></ul>
<ul id="fullResults" class="glossary">
<li id="apple" class="term"><h3>Apple</h3><p>Term definition.</p></li>
<li id="banana" class="term"><h3>Banana</h3><p>Term definition.</p></li>
<li id="cherry" class="term"><h3>Cherry</h3><p>Term definition.</p></li>
<li id="grape" class="term"><h3>Grape</h3><p>Term definition.</p></li>
<li id="orange" class="term"><h3>Orange</h3><p>Term definition.</p></li>
<li id="watermelon" class="term"><h3>Watermelon</h3><p>Term definition.</p></li>
</ul>
</section>
</body>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
