How do I insert a url into text in a Javascript var index?

Question

Below is the script, currently what it does is create a drop down box as you type in using the var search index, what i want to accomplish is to be able to click on the word google in that drop down and go to google.com, i know this can be accomplished in html using < a href="google.com" > google < /a>

how can i make that work in JS?

<script> var searchIndex = ["google","apple","iPhone","ipad"];

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> <strong>' 
   + inputTerms 
   + '</strong> is not a valid part number  <br><small><a ></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 !== "term-list") {
    ul.className = "term-list";
   }
    };

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

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

     </script>

baao · Accepted Answer · 2014-12-23 14:48:27Z

1

You can do this with this:

var terms = document.getElementsByClassName('term-list');
for (var i = 0; i<terms.length;i++) {
terms[i].addEventListener('click',gothere);
}
function gothere () {
 console.log(this.textContent);  
    var b = 'http://www.'+this.textContent+'.com';
    console.log(b);  // replace this with the next line:
  //  window.location.href = b;
}

DEMO

answered Dec 23, 2014 at 14:48

baao

73.6k18 gold badges152 silver badges209 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Angel Garcia Over a year ago

how could i accomplish this same effect on html #paragraph links?

baao Over a year ago

I don't understand the question, can you please specify? @AngelGarcia

Angel Garcia Over a year ago

for example <option value=<a href="index.html#someplace">Some Place </option> would take you to a certain spot on an HTML Page if typed into browser, is there anyway to do that using JS?

baao Over a year ago

have a look at this, uses jQuery for the animation, jsfiddle.net/5w30yu5s @AngelGarcia

baao Over a year ago

If you want a js only solution, you can replace the jQuery animate part with window.location.assign('#'+b); , does the same, without animating something

Collectives™ on Stack Overflow

How do I insert a url into text in a Javascript var index?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related