Question Details

No question body available.

Tags

javascript

Answers (4)

May 6, 2026 Score: 3 Rep: 81,612 Quality: Medium Completeness: 60%

Your intention is clearly to display filtered links in a box. However, the filter itself is providing false positives because of the link content and you intend to filter the links by their innertext and display the full links of the matches in a box. A way to achieve this is to infer the inner text.

let avaliableKeywords = [
Apples,
Bananas,
Oranges,
Strawberries
]
function innerText(input) {
    return input.split("")[0].split("'>")[1]
}
const resultsBox = document.querySelector(".result-box");
const inputBox = document.getElementById("input-box");
inputBox.onkeyup = function(){
    let result = [];
    let input = inputBox.value;
    if(input.length){
        result = avaliableKeywords.filter((keyword)=>{
            return innerText(keyword).toLowerCase().includes(input.toLowerCase());
        });
        resultsBox.innerHTML = result.join();
    }
    display(result);
    /if(!result.length){
        resultsBox.innerHTML = '';
    }/
}
function display(result){
    const content = result.map((list)=>{
        return "
  • " + list + "
    • ";
    });
    resultsBox.innerHTML = "
      " + content.join('') + "
    ";
}

    Another way is to have key-value pairs and search by key and display the value:

    let avaliableKeywords = [
{key: 'Apples', value: Apples},
{key: 'Bananas', value: Bananas},
{key: 'Oranges', value: Oranges},
{key: 'Strawberries', value: Strawberries},
]
const resultsBox = document.querySelector(".result-box");
const inputBox = document.getElementById("input-box");
    inputBox.onkeyup = function(){
    let result = [];
    let input = inputBox.value;
    if(input.length){
        result = avaliableKeywords.filter(link => {
            return link.key.toLowerCase().includes(input.toLowerCase());
        }).map(item => item.value);
        resultsBox.innerHTML = result.join();
    }
    display(result);
        /if(!result.length){
        resultsBox.innerHTML = '';
    }/
}
    function display(result){
    const content = result.map((list)=>{
        return "
  • " + list + "
    • ";
    });
    resultsBox.innerHTML = "
      " + content.join('') + "
    ";
}

    May 6, 2026 Score: 2 Rep: 63,265 Quality: Medium Completeness: 60%

    The core problem here is that your "keyword" list isn't actually a list of keywords, it's a list of HTML strings. To make the search work as you intend, it needs to contain only the actual keywords themselves. You can build the HTML string later when you want to display the results, because it has a predictable structure (or you could create a separate mapping to it in the list, if that was necessary).

    Example:

    let avaliableKeywords = [
  "Apples",
  "Bananas",
  "Strawberries"
]
    const resultsBox = document.querySelector(".result-box");
const inputBox = document.getElementById("input-box");
    inputBox.onkeyup = function() {
  let result = [];
  let input = inputBox.value;
  if (input.length) {
    result = avaliableKeywords.filter((keyword) => {
      return keyword.toLowerCase().includes(input.toLowerCase());
    });
    console.log(result);
  }
  display(result);
}
    function display(result) {
  const content = result.map((item) => {
    return "
  • " + item + "
    • ";
  });
  resultsBox.innerHTML = "
      " + content.join('') + "
    ";
}
    Search:

    May 6, 2026 Score: 2 Rep: 40,192 Quality: Medium Completeness: 80%

    Why don't you use objects instead

    // define
let avaliableKeywords = [
    { name: 'Apples', url: '/fruits/apples.html' },
    { name: 'Bananas', url: '/fruits/bananas.html' },
    { name: 'Oranges', url: '/fruits/oranges.html' },
    { name: 'Strawberries', url: '/fruits/strawberries.html' }
];
    // replace your filter
result = avaliableKeywords.filter((keyword) => {
    return keyword.name.toLowerCase().includes(input.toLowerCase());
});
    // display() func
function display(result) {
    const content = result.map((item) => {
        return 
  • ${item.name}
    • ;
    });
        resultsBox.innerHTML = "
      " + content.join('') + "
    ";
}

    if you use this only Apples, Bananas are searchable. The URL text like /fruits/ or will not affect the search.

    Working Preview
    enter image description here

    May 7, 2026 Score: 1 Rep: 123,717 Quality: Medium Completeness: 80%

    Basically the same as other answers, but using a fixed searchable list in html from which the keywords are derived and some styling to display/hide the search results.

    See also: a codepen example for a list of countries of the world.

    // create a keyword list
let avaliableKeywords = [...document.querySelectorAll(#searchableList div)]
  .map((v, i) => ({
    row: i,
    keyWord: v.textContent.trim().toLowerCase() }
    //                            ^ case insensitive search
    //       ^ textContent is sufficient: it removes all HTML
  )
);
// use event delegation to handle events
// (https://javascript.info/event-delegation)
document.addEventListener(keyup, handle);  
    function handle(evt) {
  if (evt.target.id === filterFruit) {
    const value = evt.target.value.trim().toLowerCase();
    // remove previous results
    document.querySelectorAll(.found).forEach(nf => 
      nf.classList.remove(found));
        if (value.length) {
      // filter and display found items
      const items = document.querySelectorAll(#searchableList div);
      avaliableKeywords.forEach(keyWordItem => 
        keyWordItem.keyWord.toLowerCase().includes(value) && 
          items[keyWordItem.row].classList.add(found));
    }
  }
}
    .item {
  display: none;
  margin: 0.2em 0;
      &.found {
    display: revert;
  }
}