JavaScript Array to HTML - function to show specific elements

Question

What I would like to do:

When the user types, show similar or matching results from array (Maximum 5 results).
Each element has to be unique
When the user uses 'backspace', remove also the last result(s)

When you run the code, you'll see the problem.

var allUsers = document.getElementById('searchUsers');
var value; // User input
let currentCount = 0;
let newValues = [];
var names = ["James", "Liam", "Olivia", "Mia", "Sophia", "Sophie", "Oli",
  "Olivia", "Ana", "Bianca", "James"
];

$("#searchUsers").on("keyup", function() {
  value = $(this).val();
})



$("#searchUsers").on("keyup", function() {
  let result = names.filter(item => item.toLowerCase().indexOf(value) > -1);


  // If user presses the backspace
  allUsers.addEventListener('keyup', function(event) {
    const key = event.key; // const {key} = event;
    if (key === "Backspace" && currentCount > 1) {

      //alert(key);
    }
  });



  for (let i = 0; i < result.length; i++) {

    newValues.push(result[i]);


    // If there's not input, empty the list
    if (value === '') {
      newValues = [];

    }

  }

  // Gets 5 last elements of array
  var filterResult = (newValues.slice((newValues.length - result.length), newValues.length));

  // Removes all duplicatess
  let uniqueElement = [...new Set(filterResult)];

  for (const user of uniqueElement) {
    var element = document.getElementById("searchUsers2");
    element.innerHTML += `<li><a href="/profile/${user}">${user}</a></li>`;

  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="searchArticle" style="position:absolute;z-index:1000;">
  <input id="searchUsers" type="text" placeholder="&#xF002;Search">
  <ul id="searchUsers2"></ul>

</article>

KooiInc · Accepted Answer · 2022-08-12 16:50:22Z

2

Maybe you don't need much scripting when using a datalist.

$(`.searchArticle`).append(
  `<datalist id="users">
   ${["James", "Liam", "Olivia", 
      "Mia", "Sophia", "Sophie", "Oli",
      "Olivia", "Ana", "Bianca"]
      .map(v => `<option value="${v}">`)
      .join(``)}</datalist>`);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="searchArticle" style="position:absolute;z-index:1000;">
  <input type="text" id="searchUsers" 
    placeholder="&#128269; search users" list="users">
</article>

edited Aug 12, 2022 at 16:50

answered Aug 12, 2022 at 13:47

KooiInc

124k32 gold badges145 silver badges181 bronze badges

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

1 Comment

greensky Over a year ago

@KoolInc Thank you for showing me a different way. Beautifully done.

Passionate Coder · Accepted Answer · 2022-08-12 15:45:33Z

1

You can try below one

Create a seperate function instead of calling $("#searchUsers").on("keyup", function() each time
No need for keeping extra variables like value and currentCount
Keep global variables at top

const allUsers = document.getElementById('searchUsers');
    const element = document.getElementById("searchUsers2");
    
    const names = ["James", "Liam", "Olivia", "Mia", "Sophia", "Sophie", "Oli",
      "Olivia", "Ana", "Bianca", "James"
    ];

    $("#searchUsers").on("keyup", function() {
      // call this function by passing user input
      filterResults($(this).val())
    })


  function filterResults(value){
     element.innerHTML = "";
     let newValues = [];     
     const result = names.filter(item => item.toLowerCase().indexOf(value) > -1);
     
     if (value === '' || !result.length) {
          newValues = [];
      }

      for (let i = 0; i < result.length; i++) {
        newValues.push(result[i]);
      }
      
      if(value === '' || !newValues.length) {                  
          return;
       }
       
      // Gets 5 last elements of array
      var filterResult = (newValues.slice((newValues.length - result.length), newValues.length));

      // Removes all duplicatess
      let uniqueElement = [...new Set(filterResult)];
    

      for (const user of uniqueElement) {       
        element.innerHTML += `<li><a href="/profile/${user}">${user}</a></li>`;

      }
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <article class="searchArticle" style="position:absolute;z-index:1000;">
      <input id="searchUsers" type="text" placeholder="&#xF002;Search">
      <ul id="searchUsers2"></ul>

    </article>

edited Aug 12, 2022 at 15:45

answered Aug 12, 2022 at 14:02

Passionate Coder

7,3042 gold badges24 silver badges50 bronze badges

2 Comments

greensky Over a year ago

Appreciate your answer! I have a question if you don't mind, when I type in, the results show (which is what I want) but when I continue typing the same results get added to the HTML. Any idea how I can fix this?

Passionate Coder Over a year ago

@greensky edited my answer just add element.innerHTML = ""; at begining of filterResults function

Collectives™ on Stack Overflow

JavaScript Array to HTML - function to show specific elements

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related