Enabling Wildcard Search in Microsoft Power Pages Lists

Power Pages has a search functionality within the list, which is more like an exact match search or starts with search by default. This can be quite surprising for the users, especially in the long text fields

For example:

• Searching for cardio → No results
• Searching for *cardio → Expected results

Wildcard search is already supported in Dataverse, and the only part users must enter manually is the leading asterisk. This has a negative usability impact.

This tutorial shows how to automatically prepend the wildcard when searching for lists in Power Pages using Custom JavaScript at the page level, for both Modern (Fluent UI) and Classic lists.

Why Auto-Prepending Wildcards Improves UX

Auto-prepending *:

• Auto-prepending *prevents false “no results found” results
• Complies with current trends relating to “contains” type searching practices
• Reduces the cognitive burden of non-technical users
• Helps users find long-form content easily
• Does not require additional training and/or documentation.

The goal is simple:

Allowing users to type naturally, the search function does what users expect.

Where the Code Is Applied

The code was applied at the page level by updating the page-specific Custom JavaScript in Visual Studio, ensuring the behaviour was scoped to this list only. Since the list is displayed directly on the page (not embedded), page-level JavaScript is sufficient.

Modern Power Pages Lists (Fluent UI SearchBox)

Modern lists utilise Fluent UI’s SearchBox, and the SearchBox is dynamically rendered and can also be recreated during re-rendering.

To address this issue, the script needs to:

• SearchBox: Detect the Fluent SearchBox
• Safely attach listeners
• Re-attach after DOM updates

Modern Wildcard Script (as used)

(function () {
  function attach() {

    const input =
      document.querySelector("input[id^='SearchBox'][role='searchbox']") ||
      document.querySelector("input.ms-SearchBox-field[role='searchbox']");

    if (!input || input.dataset.wildcardAttached === "1") return;
    input.dataset.wildcardAttached = "1";

    function addStar() {
      const v = input.value || "";
      if (v && !v.startsWith("*")) input.value = "*" + v;
    }

    input.addEventListener("input", addStar, true);
    input.addEventListener(
      "keydown",
      (e) => {
        if (e.key === "Enter") addStar();
      },
      true
    );

    console.log("Wildcard: attached to", input.id);
  }

  attach();
  const obs = new MutationObserver(attach);
  obs.observe(document.documentElement, { childList: true, subtree: true });
})();

What this does

• Locates the Fluent UI search input control SearchBox
• Automatically adds * when the user enters without that prefix.
• Utilises a MutationObserverfor surviving list re-renders
• No changes required in Dataverse or in FetchXML

Classic Entity Lists (Bootstrap / jQuery-based UI)

Classic lists make the input field for searching a standard HTML input box. It’s easier, but the list can refresh dynamically, which makes reattaching helpful.

Classic Wildcard Script (as used)

(function () {
  function attach() {

    const input =
      document.querySelector(".entitylist-search input.query.form-control") ||
      document.querySelector("input.query.form-control") ||
      document.querySelector(".view-search input.query");

    if (!input || input.dataset.wildcardAttached === "1") return;
    input.dataset.wildcardAttached = "1";


    const btn =
      document.querySelector(".entitylist-search button.btn.btn-default") ||
      document.querySelector(".view-search button.btn.btn-default");

    function addStar() {
      const v = input.value || "";
      if (v && !v.startsWith("*")) input.value = "*" + v;
    }


    input.addEventListener("input", addStar, true);
    input.addEventListener(
      "keydown",
      function (e) {
        if (e.key === "Enter") addStar();
      },
      true
    );

    if (btn) {
      btn.addEventListener(
        "click",
        function () {
          addStar();
        },
        true
      );
    }

    console.log("Wildcard attached to classic list search input:", input);
  }

  attach();
  const obs = new MutationObserver(attach);
  obs.observe(document.documentElement, { childList: true, subtree: true });
})();

What this does

• Targets classic list search inputs (input.query)
• Handles clicks of the Enter button and the search button
• Automatically prepends * if needed.
• Reattachment after list refreshes

Common Pitfalls: This Avoids

• Users forget to type *
• False “No data exists” conclusions.
• Over-customising FetchXML unnecessarily
• Adding training documentation for simple search behaviour

Conclusion

Power Pages already supports wildcard search at the platform level, but the experience is not user-friendly. A quick JavaScript snippet on a page can significantly improve the search experience in both Classic and Modern lists.

This approach:

• Does not require backend modifications
• Compatible with existing views in Dataverse
• Enhances Accessibility & User Confidence
• Relevance to Search Behaviour Reflecting Current Expectations