Simple search bar for UD

Universal Dashboard Universal Dashboard Show Off
1

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.

ps1
DudSearch2.ps1.gif1582Ɨ775 667 KB

Get it here :

5 Likes
2

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. https://marketplace.universaldashboard.io/publish

2 Likes
3

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
4

Cool! I merged in the PR. Thanks!

1 Like
5

Now on the marketplace !

https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.DudSearch

4 Likes
6

Hi

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

7

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
8

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
9

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

2 Likes