# Filter the node in real time
**URL:** https://discourse.nodered.org/t/filter-the-node-in-real-time/43845
**Category:** Developing Nodes
**Created:** [8 April 2021 08:06 UTC](https://discourse.nodered.org/t/filter-the-node-in-real-time/43845 "2021-04-08T08:06:15Z")
**Posts on this page:** 19
**Page:** 1
### Author:  [@jake123](https://discourse.nodered.org/u/jake123)
#### Post date: [8 April 2021 08:06 UTC](https://discourse.nodered.org/t/filter-the-node-in-real-time/43845/1 "2021-04-08T08:06:15Z")
```auto
const filter = () => {
// Filters options in the select tag.
let optionEl = options[i];
let txt = selectTag.options[i].text.toLowerCase();
if (txt.indexOf(inputEl) > -1) {
selectTag.options[i].style.display = "";
} else {
selectTag.options[i].style.display = "none";
}
};
```
This is the code for filtering that happens `oneditprepare`. Is there any way i could filter it in real time? Like not needing to reopen the node to see results of filter?
---
### Author:  [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [8 April 2021 08:08 UTC](https://discourse.nodered.org/t/filter-the-node-in-real-time/43845/2 "2021-04-08T08:08:23Z")
Can you explain in more detail?
If the edit dialog is not open there is no list being displayed to be filtered.
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [8 April 2021 08:10 UTC](https://discourse.nodered.org/t/filter-the-node-in-real-time/43845/3 "2021-04-08T08:10:54Z")
> [@jake123](#):
>
> Is there any way i could filter it in real time? Like not needing to reopen the node to see results of filter?
If i understand, you mean "while the edit dialog is open" you want this filter to be called - correct?
You need the code to be callable (like in a function) and an event to cause it to be called.
Its down to the structure of your nodes code.
For example, if you want it to be called when a user types, then attach an "on" change event to the text field.
---
### Author:  [@jake123](https://discourse.nodered.org/u/jake123)
#### Post date: [8 April 2021 08:11 UTC](https://discourse.nodered.org/t/filter-the-node-in-real-time/43845/4 "2021-04-08T08:11:50Z")
This is my node.If i want to filter it i have to write in the filter input and then reopen the node to see results of that filter.
I want to filter it the second i write something in the filter input.
I tried in vanilla js and its easy there. I dont know how to do it in node-red.
---
### Author:  [@jake123](https://discourse.nodered.org/u/jake123)
#### Post date: [8 April 2021 08:12 UTC](https://discourse.nodered.org/t/filter-the-node-in-real-time/43845/5 "2021-04-08T08:12:34Z")
Yeah but how can i attach it on the script type html. I tried doing that and it says filter() is undefined
---
### Author:  [@jake123](https://discourse.nodered.org/u/jake123)
#### Post date: [8 April 2021 08:13 UTC](https://discourse.nodered.org/t/filter-the-node-in-real-time/43845/6 "2021-04-08T08:13:33Z")
```auto
elem.on("keyup", filter());
```
Tried it like this.
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [8 April 2021 08:13 UTC](https://discourse.nodered.org/t/filter-the-node-in-real-time/43845/7 "2021-04-08T08:13:52Z")
> [@jake123](#):
>
> Yeah but how can i attach it on the script type html
Sorry, i dont understand that,
> [@jake123](#):
>
> I tried doing that and it says filter() is undefined
That'll probably be down to scope (where your code is placed)
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [8 April 2021 08:14 UTC](https://discourse.nodered.org/t/filter-the-node-in-real-time/43845/8 "2021-04-08T08:14:58Z")
> [@jake123](#):
>
> `elem.on("keyup", filter());`
that should be `elem.on("keyup", filter);` assuming `filter` is in scope
---
### Author:  [@jake123](https://discourse.nodered.org/u/jake123)
#### Post date: [8 April 2021 08:15 UTC](https://discourse.nodered.org/t/filter-the-node-in-real-time/43845/9 "2021-04-08T08:15:09Z")
The code for filter is in `oneditprepare`. I tried adding a button that will trigger my function but it still wont trigger until i reopen the node.
---
### Author:  [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [8 April 2021 08:15 UTC](https://discourse.nodered.org/t/filter-the-node-in-real-time/43845/10 "2021-04-08T08:15:26Z")
> [@jake123](#):
>
> I tried doing that and it says filter() is undefined
You realise that means nothing to us as we can't see your code?
```auto
elem.on("keyup", filter());
```
Assuming `filter` is a function you have defined and is in scope, then you don't want the `()` in that statement.
You need to pass `filter` not call `filter()`
---
### Author:  [@jake123](https://discourse.nodered.org/u/jake123)
#### Post date: [8 April 2021 08:17 UTC](https://discourse.nodered.org/t/filter-the-node-in-real-time/43845/11 "2021-04-08T08:17:28Z")
```auto
fetch(url)
.then((res) => res.json())
.then((data) => {
opt = data;
opt.forEach((item) => {
options.push({
//v: ``,
v: ``, // Sets the value of the option tag
t: item.name,
});
});
let selectTag = $("#node-input-options")[0]; // Selects the Select Tag
let inputEl = $("#node-input-filter").val().toLowerCase();
let elem = $("#node-input-filter");
for (let i = 0; i < options.length; i++) {
let value = options[i].v;
let text = options[i].t; // Napraviti da svaki option kojeg odaberemo da bude prikazan ili da mu je dodan atribut SELECTED!
options[i].selected = "selected";
$("#node-input-options").append(
$("").attr("value", value).text(text) //For every element in the select tag append appropriate value and text ( )
);
const filter = () => {
// Filters options in the select tag.
let optionEl = options[i];
let txt = selectTag.options[i].text.toLowerCase();
if (txt.indexOf(inputEl) > -1) {
selectTag.options[i].style.display = "";
} else {
selectTag.options[i].style.display = "none";
}
};
const ddselect = () => {
let displayText = selectTag.options[i].text;
let areaVal = $("#node-input-txtArea").val();
areaVal = displayText;
};
elem.on("keyup", filter);
let selectEl = $("#node-input-options");
selectEl.on("change", ddselect());
}
});
};
```
This is all my code in `oneditprepare`
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [8 April 2021 08:29 UTC](https://discourse.nodered.org/t/filter-the-node-in-real-time/43845/12 "2021-04-08T08:29:02Z")
sorry, but the structure of your code is all wrong.
- filter function should **not** be inside a loop
- adding the `on` change event to the node-input-filter should **not** be inside the loop
Move the filter function outside of the loop & change it to loop through the options, perform the test, then do a `$(el).show()` or `$(el).hide()` based on the test.
---
### Author:  [@jake123](https://discourse.nodered.org/u/jake123)
#### Post date: [8 April 2021 08:47 UTC](https://discourse.nodered.org/t/filter-the-node-in-real-time/43845/13 "2021-04-08T08:47:03Z")
```auto
const filter = () => {
// Filters options in the select tag.
for (let i = 0; i < options.length; i++) {
let optionEl = options[i];
let txt = selectTag.options[i].text.toLowerCase();
if (txt.indexOf(inputEl) > -1) {
selectTag.options[i].style.display = "";
} else {
selectTag.options[i].style.display = "none";
}
}
};
elem.on("keyup", filter);
```
for now i moved this outside the loop . But it doesnt give back the right filter as before. I type c in filter and on keyup it filters but it filters wrong. I dont rly know jquery so for now i didnt do the show or hide because i dont rly know.Ill fix that but for now i need to fix the filter.
And the filter function triggers only when i press 1st key. After it its dead.
---
### Author:  [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [8 April 2021 08:58 UTC](https://discourse.nodered.org/t/filter-the-node-in-real-time/43845/14 "2021-04-08T08:58:49Z")
You do not get the latest value of `inputEl` inside your filter function - so you are always filtering based on whatever value `inputEl` was originally set to.
Move the line
```auto
let inputEl = $("#node-input-filter").val().toLowerCase();
```
inside your filter function.
And don't forget you can use `console.log` to add debug to your code to figure out what it is doing. You would have very quickly seen that `inputEl` was never changing if you had tried that.
---
### Author:  [@jake123](https://discourse.nodered.org/u/jake123)
#### Post date: [8 April 2021 09:01 UTC](https://discourse.nodered.org/t/filter-the-node-in-real-time/43845/15 "2021-04-08T09:01:03Z")
You are right. I tried console.log() but with wrong elements. I just dont understand why does it give back the wrong results. For example i type c in filter input and the result is Pump1Running Pump2Running
Nevermind, i made it work.
Thanks very much.
---
### Author:  [@jake123](https://discourse.nodered.org/u/jake123)
#### Post date: [8 April 2021 09:51 UTC](https://discourse.nodered.org/t/filter-the-node-in-real-time/43845/16 "2021-04-08T09:51:26Z")
How could i create list item every time i select one of the options?
Tried in JS and it works.
```auto
const ddselect = () => {
var d = document.getElementById("node-input-options");
console.log(d);
let displayText = d.options[d.selectedIndex].text;
console.log(d.selectedIndex);
document.getElementById("txtArea").value = displayText;
let list = document.createElement("ul");
let listItem = document.createElement("li");
listItem.innerHTML = displayText;
list.append(listItem);
document.body.append(listItem);
```
As usual i dont know how to do it in node red
---
### Author:  [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [8 April 2021 10:19 UTC](https://discourse.nodered.org/t/filter-the-node-in-real-time/43845/17 "2021-04-08T10:19:28Z")
> [@jake123](#):
>
> How could i create list item every time i select one of the options?
Create it where? The code you have is just appending it to the document body. I assume you have an element in your node's html where you want to append it instead?
---
### Author:  [@jake123](https://discourse.nodered.org/u/jake123)
#### Post date: [8 April 2021 10:25 UTC](https://discourse.nodered.org/t/filter-the-node-in-real-time/43845/18 "2021-04-08T10:25:47Z")
All the previous code is the same . I just created anoter
```auto
List of selected data
// I want to append li here
```
- i created the config default named txtArea
This Pump1 is just hardcoded to show u what i want exactly
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [22 April 2021 10:26 UTC](https://discourse.nodered.org/t/filter-the-node-in-real-time/43845/19 "2021-04-22T10:26:02Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.