I am building a contacts directory.
On the right there is a nav bar with the alphabet.
At the moment all the contacts from the database are showing but what I am trying to do is to only show the ones where the lastName starts by the letter clicked on the nav bar and hide the rest.
So basically when I click to, for example letter B on the nav bar on the right, I want all the contacts with last names starting by the letter B to appear instead of all of the contacts, does this make sense?
I have been suggested to wrap each name into the letter they start with however I have a very large database and I am not really sure how to apply that on php. This is what I have come up with so far.
I have tried this now but not sure where I am going wrong. I think it is in the php when I am trying to implement the sql "like" operator in javascript as I'm probably not using the right method but please if someone could tell me where am I going wrong would be great!
I know I need to use something similar to this but not sure how to apply it:
$('#nav a').click(function (e) {
var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
for (var i = 0; i < str.length; i++) {
var nextChar = str.charAt(i);
$('#' + nextChar).fadeOut();
}
var txt = $(e.target).text();
$('#' + txt).delay(400).fadeIn();
});
See my code here:
$(document).ready(function() {
$.ajax({
type: 'GET',
url: 'php/getAll.php',
dataType: 'json',
success: function(data, alphabet, sort) {
alphabet = data.nav;
var db = data.data;
for (var letter of alphabet) {
$("#nav").append(`<li><a href="?firstLetter=${letter}">${letter}</a></li>`);
}
for (let i in db) {
$('#database').append(`
<div class="loadProfile col-sm-6 col-md-4" onclick="loadProfile(${JSON.stringify(db[i]).split('"').join(""")})">
<div class="widget col-3 profile">
<div class="widget-simple">
<span>
<img src="img/user-regulars.svg" alt="avatar" class="widget-image img-circle pull-left animation-fadeIn">
</span>
<h4 class="widget-content text-left">
<span id="fullName">${db[i].lastName}, ${db[i].firstName}</span>
<p class="findID" style="font-size:11px; color: rgb(190, 190, 190); display: inline"> - ID: ${db[i].id}</p>
<br>
<div class="info" style: "overflow: hidden">
<p class=${filterBy == "department"} style="font-size:11px; color: rgb(190, 190, 190); float: left">${db[i].department}</p>
<p class=${filterBy == "location"} style="font-size:11px; color: rgb(190, 190, 190); float: left">, ${db[i].location}</p>
<a href="" class="btn btn-xs btn-primary2 Phone" data-toggle="tooltip" title="" data-original-title="Phone"></a>
<a href="mailto:${db[i].email}" rel="prefetch" id="eM" class="btn btn-xs btn-primary Email" data-toggle="tooltip" title="" data-original-title="Email"></a>
</div>
</h4>
</div>
</div>
</div>
`)
}
return true;
}
})
})
<main>
<div class="container">
<div class="row">
<div class="col-md-12 main">
<div class="block1">
<div id="nav" class="CharacterContainer"></div>
</div>
<div class="row style-alt" id="database">
</div>
</div>
</div>
</div>
</main>
<?php
$sort = isset($_GET['firstLetter']) ? filter_input(INPUT_GET, 'firstLetter',FILTER_SANITIZE_URL) : "" ;
$query = "SELECT p.id, p.lastName, p.firstName, p.jobTitle, p.email, d.name as department, l.name as location FROM personnel p LEFT JOIN department d ON (d.id = p.departmentID) LEFT JOIN location l ON (l.id = d.locationID) WHERE p.lastName LIKE '$sort%' ORDER BY p.lastName ASC" ;
$result = $conn->query($query);
<?
What I have tried:
<pre lang="Javascript">
$('#nav a').click(function (e) {
var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
for (var i = 0; i < str.length; i++) {
var nextChar = str.charAt(i);
$('#' + nextChar).fadeOut();
}
var txt = $(e.target).text();
$('#' + txt).delay(400).fadeIn();
});