CODEWITHSUNDEEP
javascripthtmlcss
Dr. Joben
Dr. Joben

Reputation: 33

How the make the search list shorter?

t short

How to make the search result show like much shorter like 4 row instead of all and extending to the bottom?

Here is my code:

    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];

css code:

#myUL li a {
  transform: translate(270px,-1400px); 
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  width: 28%;
  padding: 12px;
  text-decoration: none;
  font-size: 16px;
  color: black;
  display: block;
}

Rest of the code:

var UL = document.getElementById("myUL");
// hilde the list by default
UL.style.display = "none";
var searchBox = document.getElementById("myInput");

// show the list when the input receive focus
searchBox.addEventListener("focus",  function(){
    // UL.style.display = "block";
});

// hide the list when the input receive focus
searchBox.addEventListener("blur", function(){

});


function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    ul = document.getElementById("myUL");
    filter = input.value.toUpperCase();
    // if the input is empty hide the list
    if(filter.trim().length < 1) {
        ul.style.display = "none";
        return false;
    } else {
        ul.style.display = "block";
    }
    li = ul.getElementsByTagName("li");   
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];

        // This is when you want to find words that contain the search string
     if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
        li[i].style.display = "";
     } else {
        li[i].style.display = "none";
    }

Please help me I'm trying to solve this for a few hours now :( Thanks in advance!

Upvotes: 0

Views: 112

Answers (1)

greysaff
greysaff

Reputation: 198

Try this

var limit = 4;    
for (i = 0, j = 0; i < li.length && j < limit; i++) {

and in the block where there's a match, this

// This is when you want to find words that contain the search string
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
    li[i].style.display = "";
    j++;
} else {

The loop will terminate when you've made 4 matches

Upvotes: 2

Related Questions