Simple search bar for UD

Here is a simple custom search bar I developed.
I called it DudSearch.

You can use it to search absolutely anything.
You are in control of what it searches and how it searches it.
Custom syntax like [Tags] to filter using different criterias ?
No problem at all !

I hope to improve it over time to include

  • Better styling
  • Filtered data / autocomplete suggestion
  • custom buttons / checkboxes to set custom parameter.

It has the following parameters

Text: Set the initial text (Although now that I think of it, the filter won’t apply on load)
Placeholder: Set the control placeholder (If not provided, Search… is used by default
[ScriptBlock]OnChange: Endpoint called each time the textbox content change
[ScriptBlock]OnEnter Endpoint called only when the user press Enter.

New-DudSearch  -OnEnter { Set-UDElement -id 'Debug' -content { "OnEnter event: Enter key was pressed" } } -OnChange {
   Set-UDElement -id 'Debug' -content { "OnChange event - New text: $EventData" }

See SimpleDemo.ps1 / Demo.ps1 files to see how to implement.

Get it here :


Nice! Would love to see that on the PowerShell Gallery!

If you publish it with the ud-control tag it will also show up on the Marketplace.


Yes, good idea.
I’ll do it in the next few days.

Edit 1:
I fixed a vulnerability found in one of the package by Github security insight.
The vulnerability in Yaml-js, which is a dependency of one of the package.

I also submitted a pull request to suggest that the UD-custom-control-template be updated too.

1 Like

Cool! I merged in the PR. Thanks!

1 Like

Now on the marketplace !



Great component, how would i grab the text value entered into it? Thanks

Haven’t used this one yet but I’ll probably give it a go at some point looks interesting. I imagine it’s likely the same as other ud components, try $eventdata in the on change scriptblock!

Maybe it can also be accessed via get-udelement too? (Value inside attributes?)

1 Like

Note that my component is no longer maintained.
I archived the project, hid it from the gallery and I expect it will disappear from Adam component marketplace shortly.

@psDevUK released a new component called UniversalDashboard.UDNavbarSearch that cover what my component did but has a few more tricks up its sleeve.

Check out the article he made about it in his blog if you are interested here .

CC @insomniacc @Srichman0128

1 Like

Happy cake day @itfranck thanks for the mention, I wanted to do a search bar but didn’t have a clue, so your original project gave me some ideas. Ultimately the JS knowledge of @BoSen29 helped make this component to the marketplace, as I was seriously struggling to make it work across the whole page. I did figure out hiding the elements and adding a delay though, again all through JS. This is the most important bit about this script that makes it work dynamically:-

 onSearchClick(e) {
    var inputText = document.getElementsByClassName(this.props.getElementsByClassName);
    var i;
    for (i = 0; i < inputText.length; i++) {
      var innerHTML = inputText[i].innerHTML;
      var index = innerHTML.indexOf(e);
      if (index >= 0) {
        innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + e.length) + "</span>" + innerHTML.substring(index + e.length);
        inputText[i].innerHTML = innerHTML;
        inputText[i].style.display = "block";
      } else {
        function sleep(time) {
          return new Promise((resolve) => setTimeout(resolve, time));
        inputText[i].style.display = "none";
        sleep(this.props.delay).then(() => {
          var cardNum = document.getElementsByClassName(this.props.getElementsByClassName)
          var i;
          for (i = 0; i < cardNum.length; i++) {
            cardNum[i].style.display = "block";

so the end user doesn’t have to do anything fancy with the module, the function does specify card-content as the classname just for a help.
If anyone has issues with this component more than happy to help but please do check the blog first