/    Sign up×
Community /Pin to ProfileBookmark

js filter problem to filter by ID

Hello, colleagues πŸ˜‰

I am new in JavaScript, bumped into a problem and believe, you help and explain me πŸ™‚

So here is my problem, I want to make a filter in js file would filter by names OR by IDs (id of name).
Now it filters just by names and not by IDs.

Could you, please, tell me how to solve my problem and explain what Ive done wrong?

“`
const search = document.getElementById(“search”);
const projectName = document.querySelectorAll(“.name”);

search.addEventListener(“keyup”, filterProjects);

function filterProjects(e) {
const text = e.target.value.toLowerCase();
projectName.forEach(function (project) {
const item = project.textContent;
if (item.toLowerCase().indexOf(text) != -1) {
project.parentElement.style.display = “”
} else {
project.parentElement.style.display = “none”
}
})
}

const filter = document.getElementById(“filter”);
const taskName = document.querySelectorAll(“.taskName”);
const taskID = document.fquerySelectorAll(“.taskID”);

search.addEventListener(“keyup”, filterProjects);

function filterProjects(e) {
const text = e.target.value.toLowerCase();
projectName.forEach(function (project) {
const item = project.textContent;
if (item.toLowerCase().indexOf(text) != -1) {
project.parentElement.style.display = “”
} else {
project.parentElement.style.display = “none”
}
})
}

function toggle(){
var blur = document.getElementById(‘blurbg’);
blur.classList.toggle(‘active’);
var popup = document.getElementById(‘newprojbox’);
popup.classList.toggle(‘active’);
var hide = document.getElementById(‘allprojects’)
hide.classList.toggle(‘passive’);
}

function tasktoggle(){
var taskblur = document.getElementById(‘blurbg’);
taskblur.classList.toggle(‘active’);
var taskpopup = document.getElementById(‘newtaskbox’);
taskpopup.classList.toggle(‘active’);
var taskhide = document.getElementById(‘alltasks’)
taskhide.classList.toggle(‘passive’);
}
“`

to post a comment
JavaScript

16 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumMay 12.2021 β€”Β It would be helpful if you provided some sample HTML and information about the background of this task.
Copy linkTweet thisAlerts:
@mamandisauthorMay 12.2021 β€”Β @Sempervivum#1631563

HTML is not small :D

I will paste it if it would help..

but maybe DB columns would help?!

https://ibb.co/b2D2FtB (link to img)

What I try to make is:

there is a table with <th>, <td>, one column called name, another called ID, filter works on name, but not on ID..
Copy linkTweet thisAlerts:
@SempervivumMay 13.2021 β€”Β >there is a table with <th>, <td>, one column called name, another called ID, filter works on name, but not on ID..

That's helpful information. The wheel is running, why invent it again? My recommendation:

https://datatables.net

https://datatables.net/examples/api/multi_filter.html

Features not needed can be switched off by configuration.
Copy linkTweet thisAlerts:
@mamandisauthorMay 13.2021 β€”Β @Sempervivum#1631567 , thank you! ;)

but I have not ment, that variables to these columns are getting from DB (mysql).

Tried to figure out your second link, but no luck.. :#

``<i>
</i> &lt;?php
$query = "SELECT * FROM projects";
$result = mysqli_query($connect, $query);

if (mysqli_num_rows($result) &gt; 0) {

while ($row = mysqli_fetch_array($result)) {

?&gt;

&lt;tr&gt;
&lt;td class="name"&gt;&lt;a href="tasks.php?id=&lt;?php echo $row['ID'];?&gt;"&gt;&lt;?php echo $row["name"]; ?&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;?php echo $row["description"]; ?&gt;&lt;/td&gt;

&lt;td hidden&gt;&lt;?php echo $row["ID"]; ?&gt;&lt;/td&gt;

&lt;td class="icspace"&gt;&lt;a id="edit" href="connection/edit.php?id=&lt;?php echo $row['ID'];?&gt;"&gt;&lt;i class="far fa-edit fa fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;

&lt;td class="icspace"&gt;&lt;a href="connection/del.php?id=&lt;?php echo $row['ID']; ?&gt;"&gt;&lt;i class="fas fa-trash fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;<i>
</i>
``


How I can use $row (it is php (or other variable)) to search (found that filter() method is not good to look all the table) all the table?
Copy linkTweet thisAlerts:
@SempervivumMay 13.2021 β€”Β >How I can use $row (it is php (or other variable)) to search (found that filter() method is not good to look all the table) all the table?

Do I understand this correctly:

You mind that the data is downloaded completely and filtered in the browser by javascript only?

Instead you intend to filter the data on the server already so that the filtered data has to be downloaded only?
Copy linkTweet thisAlerts:
@mamandisauthorMay 14.2021 β€”Β @Sempervivum#1631595 , no, understood not correct..

I think better would be to share github:

https://github.com/kukulis69/Projekt_tsk.git

Could you, please, check it.. and tell me what I made wrong..

I am learning, so I am very grateful when I hear expert thoughts.. :)

P.S. js file is in js folder
Copy linkTweet thisAlerts:
@SempervivumMay 14.2021 β€”Β OK, I'm gonna give it a try, but not this evening as my local time is 10pm.

It would help if you shared the HTML of the table, several lines would be sufficient, from the source view of your browser, where the PHP is replaced.
Copy linkTweet thisAlerts:
@mamandisauthorMay 15.2021 β€”Β @Sempervivum#1631618 , thank you very much..

I think its needed to take a look to variables in workspace.php file, couse there is showing this table which I need to filtered..

https://file.io/ZDc42UxV4x3T
Copy linkTweet thisAlerts:
@mamandisauthorMay 16.2021 β€”Β @Sempervivum#1631618 , hello ;)

when you will take a look to my code, maybe we can chat thru somewhere live?

I think would be better.. or you just correct errors Ive made and will tell me?
Copy linkTweet thisAlerts:
@SempervivumMay 16.2021 β€”Β Check if this is what you require:
``<i>
</i> find ID: &lt;input id="searchID" data-class="id"&gt; find name: &lt;input id="searchName" data-class="name"&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;td class="id"&gt;1&lt;/td&gt;
&lt;td class="name"&gt;Laisez Faire&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class="id"&gt;2&lt;/td&gt;
&lt;td class="name"&gt;Barbarossa&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class="id"&gt;3&lt;/td&gt;
&lt;td class="name"&gt;Vaccination&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class="id"&gt;4&lt;/td&gt;
&lt;td class="name"&gt;Testas&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;script&gt;
document.getElementById("searchID").addEventListener("keyup", filterProjects);
document.getElementById("searchName").addEventListener("keyup", filterProjects);

function filterProjects(e) {
const searchTerm = e.target.value.toLowerCase();
const prClass = e.target.dataset['class'];
document.querySelectorAll('.' + prClass).forEach(function (item) {
if (item.textContent.toLowerCase().indexOf(searchTerm) != -1) {
item.parentElement.style.display = ""
} else {
item.parentElement.style.display = "none"
}
})
}
&lt;/sript&gt;<i>
</i>
``
Copy linkTweet thisAlerts:
@mamandisauthorMay 18.2021 β€”Β @Sempervivum#1631676 , thank you for your help :)

But as you saw, I have one search box with id="search" and here you made two separated fields where to write text..

Is it possible connect these input fields to one?

I found tutorial, followed it and built it - working (but not all functions I understand). Now try to adapt it to mine project..
``<i>
</i>
const result = document.getElementById('result')
const filter = document.getElementById('filter')
const listItems = []

getData()

filter.addEventListener('input', (e) =&gt; filterData(e.target.value))

async function getData() {
const res = await fetch('https://randomuser.me/api?results=50')

const { results } = await res.json()

// Clear result
result.innerHTML = ''

results.forEach(user =&gt; {
const li = document.createElement('li')

listItems.push(li)

li.innerHTML =

<img src="${user.picture.large}" alt="${user.name.first}">
<div class="user-info">
<h4>${user.name.first} ${user.name.last}</h4>
<p>${user.location.city}, ${user.location.country}</p>
</div>


result.appendChild(li)
})
}

function filterData(searchTerm) {
listItems.forEach(item =&gt; {
if(item.innerText.toLowerCase().includes(searchTerm.toLowerCase())) {
item.classList.remove('hide')
} else {
item.classList.add('hide')
}
})
}<i>
</i>
``

Could you help me, please?! ;)
Copy linkTweet thisAlerts:
@SempervivumMay 18.2021 β€”Β >Is it possible connect these input fields to one?

Shurely this can be done. Is your ID numeric?
Copy linkTweet thisAlerts:
@SempervivumMay 18.2021 β€”Β Check if this fits your needs:
``<i>
</i> find ID or name: &lt;input id="search"&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;td class="id"&gt;1&lt;/td&gt;
&lt;td class="name"&gt;Laisez Faire&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class="id"&gt;2&lt;/td&gt;
&lt;td class="name"&gt;Barbarossa&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class="id"&gt;3&lt;/td&gt;
&lt;td class="name"&gt;Vaccination&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class="id"&gt;4&lt;/td&gt;
&lt;td class="name"&gt;Testas&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;script&gt;
document.getElementById("search").addEventListener("keyup", filterProjects);
const cellsID = document.querySelectorAll('table td.id');
const cellsName = document.querySelectorAll('table td.name');

function filterProjects(e) {
const searchTerm = e.target.value.toLowerCase();
for (let i = 0; i &lt; cellsID.length; i++) {
if (cellsID[i].textContent.toLowerCase().indexOf(searchTerm) != -1
|| cellsName[i].textContent.toLowerCase().indexOf(searchTerm) != -1) {
cellsID[i].parentElement.style.display = '';
} else {
cellsID[i].parentElement.style.display = 'none';
}
}
}
&lt;/script&gt;<i>
</i>
``

Attention: All rows of the table have to be parrellel with reference to name and ID: Each row having an ID has to have a name too and vice versa. If not the code would have to be extented a bit.
Copy linkTweet thisAlerts:
@mamandisauthorMay 25.2021 β€”Β @Sempervivum#1631758 , Thank you very much! ;) it works great!

When I read a code you wrote, look simple and understandable in general.

Could you tell me good video lessons or sth to learn js? I know, there are lot of youtube videos and etc. - I use it, but maybe you could tell me really good and clear courses?

Thanks again ;)
Copy linkTweet thisAlerts:
@SempervivumMay 25.2021 β€”Β >When I read a code you wrote, look simple and understandable in general.

Fine that it works for you and that you like it. Yes, I always try to follow the principle "KISS" - "keep it simple and stupid" and give priority to readability.

>Could you tell me good video lessons or sth to learn js?

Unfortunately I can't as I prefer looking up in the text based manuals. MDN is recommendable to start with as well as a resource for experienced coders:

https://developer.mozilla.org/en-US/docs/Web/JavaScript
Copy linkTweet thisAlerts:
@mamandisauthorMay 26.2021 β€”Β Thank you ;)

@Sempervivum#1632136 ,

now try to make search in task page (you showed me how to do with projects),

in tasks.php file change ID (in projects id="search", in tasks id="searcht"), names what to filter are same - id, name, made new js file for this, cause I tried to copy code, paste it in same script.js file, changed input id to 'searcht', but stopped working project filter, do not understand why.. %/, so pasted in separated js file and of course added script in task.php.

Could explain why its not filtering tasks, please..

Forgot to tell you that done dragNdrop in tasks.. lot of left to configure, but looks this event works.. So I need to filter cards in three containers..

Do you know how to solve this?

https://github.com/kukulis69/filterT.git

take look to img (what I mean containers):

https://file.io/vtjuqBa3Ijrf
Γ—

Success!

Help @mamandis spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 β€” BETA 3.28,
whats_new: community page,
up_next: more Davinciβ€’003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinciβ€’003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...