Steps for utilizing the Bootstrap filter to search for a specific name starting with a particular letter

Question

Steps for utilizing the Bootstrap filter to search for a specific name starting with a particular letter

I have implemented a bootstrap filter for searching, but I am encountering an issue. Currently, when I type 'n', it displays all names containing 'n' like Nathan and Arjan. However, I would like it to only show names that start with 'n', such as Nathaan and Narima. Here is the blade.php code snippet:

<input class="form-control" id="myInput" type="text" placeholder="Search..">
<tbody id="myTable">
  <tr>
    <td>John</td>
  </tr>
  <tr>
    <td>Anja</td>
  </tr>  
</tbody>

Here is my script portion:

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

javascript html css bootstrap-4

Answer 1

Answer №1

A handy function known as startsWith is available for you to utilize. For more detailed information, please refer to the documentation provided at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().startsWith(value))
    });
  });
});
</script>

Answer 2

A handy function known as startsWith is available for you to utilize. For more detailed information, please refer to the documentation provided at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().startsWith(value))
    });
  });
});
</script>

Answer 3

Answer №2

If you feel like it, go ahead and modify the method.

$("#myInput").on("input", function() {
    var userInput = $(this).val().toLowerCase();
    var items = $("tr td");

    // Start by hiding all items:
    items.parent().hide();

    // Show only items that match user input:
    items.filter(function () {
        return $(this).text().toLowerCase().indexOf(userInput) == 0;
    }).parent().show();
});

Answer 4

If you feel like it, go ahead and modify the method.

$("#myInput").on("input", function() {
    var userInput = $(this).val().toLowerCase();
    var items = $("tr td");

    // Start by hiding all items:
    items.parent().hide();

    // Show only items that match user input:
    items.filter(function () {
        return $(this).text().toLowerCase().indexOf(userInput) == 0;
    }).parent().show();
});

Answer 5

Answer №3

One alternative method is to utilize the power of Regular Expressions (RegExp):

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      /* $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) */
      const searchRegEx = new RegExp(`^${value}`, 'i');
      $(this).toggle(searchRegEx.test($(this).text().trim()));
    });
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<input class="form-control" id="myInput" type="text" placeholder="Search..">
<table class="table table-bordered">

  <tbody id="myTable">
    <tr>
      <td>John</td>
    </tr>
    <tr>
      <td>Anja</td>
    </tr>
  </tbody>
</table>

Answer 6

One alternative method is to utilize the power of Regular Expressions (RegExp):

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      /* $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) */
      const searchRegEx = new RegExp(`^${value}`, 'i');
      $(this).toggle(searchRegEx.test($(this).text().trim()));
    });
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<input class="form-control" id="myInput" type="text" placeholder="Search..">
<table class="table table-bordered">

  <tbody id="myTable">
    <tr>
      <td>John</td>
    </tr>
    <tr>
      <td>Anja</td>
    </tr>
  </tbody>
</table>

Answer 7

Answer №4

When using .charAt(0), the result set is filtered to match the first character. This example is based on a modification of a basic code snippet from w3schools.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>My Customers</h2>

<input type="text" id="myInput" onkeyup="filterBy()" placeholder="Search..." title="Type in a name">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>  
  <tr>
    <td>Marimba</td>
    <td>Something</td>
  </tr>
    <tr>
    <td>Marimba</td>
    <td>Something</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
</table>

<script>
function filterBy() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      if (txtValue.toUpperCase().charAt(0) ==  filter.charAt(0)) {
          tr[i].style.display = "";
        }
      } else {
        tr[i].style.display = "none";
      }
      if(filter.length == 0)
      {
          tr[i].style.display = "";
      }
    }       
  }
}
</script>

</body>
</html>

Answer 8

When using .charAt(0), the result set is filtered to match the first character. This example is based on a modification of a basic code snippet from w3schools.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>My Customers</h2>

<input type="text" id="myInput" onkeyup="filterBy()" placeholder="Search..." title="Type in a name">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>  
  <tr>
    <td>Marimba</td>
    <td>Something</td>
  </tr>
    <tr>
    <td>Marimba</td>
    <td>Something</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
</table>

<script>
function filterBy() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      if (txtValue.toUpperCase().charAt(0) ==  filter.charAt(0)) {
          tr[i].style.display = "";
        }
      } else {
        tr[i].style.display = "none";
      }
      if(filter.length == 0)
      {
          tr[i].style.display = "";
      }
    }       
  }
}
</script>

</body>
</html>

Steps for utilizing the Bootstrap filter to search for a specific name starting with a particular letter

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

When CSS animations are active, the jQuery hide().slideDown() function fails to execute properly

Angular JS - Implementing a flexible URL structure for fetching data using $http GET

Using Cucumber for testing javascript-loaded content can be incredibly powerful and effective in ensuring the functionality

JavaScript Challenge: Calculate the Number of Visible Characters in a Div

Programmatically setting properties for elements

Issues with loading SourceMap in DevTools after upgrading from Bootstrap 3 to 4

Ways to make a chosen row stand out in an *ngFor loop?

Determine the dropdown list value by analyzing the final two variables in a textfield

jinja2.exceptions.UndefinedError: The variable 'participant' has not been defined

Struggling with integrating vue pagination

What is the best method to assign each key in an Object to the corresponding value in another Object?

retrieve a static method that returns an asynchronous value

Executing various axios requests to retrieve diverse data and populating multiple sections of the user interface in React Native

Is there a way to verify the status of a radio button without using a submit button?

Output PHP code within the HTML content using javascript's innerHTML functionality

Utilizing arrow keys as a means of setting focus (HTML & JavaScript)

Dynamic routes in NextJS automatically append a .txt extension to the end of the URL

Maintain the values of radio buttons, dropdowns, and checkboxes using Javascript

Are your macOS devices not displaying the Scrollbar CSS buttons correctly?

JavaScript for Designing in Two and Three Dimensions