Power Platform Community Forum Thread Details

Hi Community,

I have a list view of one of my data tables in my power page and search is enabled. I noticed that if I search with it, only columns where the data starts with the search query are detected and displayed in the results. I assume this is "Begins With" logic. I need "Contains" logic applied for my search bar so that all relevant results are displayed. A quick workaround I have found is adding asterisks in front and at the end of a query string so that it imitates Contains logic when displaying results. However, I would like suggestions on a permanent solution where users won't have to manually add asterisks or see any in the search bar.

I have some Javascript I wrote in the List to automatically add asterisks to the search query after the Search button or Enter is clicked, but it still shows up in the search bar as seen in the image attached below. If there is a way to edit my code so that the asterisks won't be seen by the user. this would also be appreciated.

My code in the List options in Power Pages Management:

// Wait for the input to appear before binding event listeners  
function waitForElement(selector, callback, timeout = 5000) {  
  const start = Date.now();  
  const interval = setInterval(() => {  
    const element = document.querySelector(selector);  
    if (element) {  
      clearInterval(interval);  
      callback();  
    } else if (Date.now() - start > timeout) {  
      clearInterval(interval);  
      console.warn(`Element ${selector} not found within ${timeout}ms`);  
    }  
  }, 100);  
}  
 
waitForElement(".entitylist-search input.query", function () {  
  const input = document.querySelector(".entitylist-search input.query");  
  const button = document.querySelector(".entitylist-search .input-group-btn button");  
 
  if (input && button) {  
    console.log("Search input and button found!");  
 
    // Store original event handlers 
    const originalButtonHandler = button.onclick; 
    const originalFormHandler = input.form ? input.form.onsubmit : null; 
 
    // Override button click 
    button.onclick = function(e) { 
      // Add asterisk if needed 
      if (input.value && !input.value.startsWith("*")) {  
        input.value = "*" + input.value + "*";  
      } 
       
      // Call original handler if it exists 
      if (originalButtonHandler) { 
        return originalButtonHandler.call(this, e); 
      } 
    }; 
 
    // Override form submission if form exists 
    if (input.form) { 
      input.form.onsubmit = function(e) { 
        // Add asterisk if needed 
        if (input.value && !input.value.startsWith("*")) {  
          input.value = "*" + input.value + "*";  
        } 
         
        // Call original handler if it exists 
        if (originalFormHandler) { 
          return originalFormHandler.call(this, e); 
        } 
      }; 
    } 
 
    // Handle Enter key 
    input.addEventListener("keydown", function(e) { 
      if (e.key === "Enter") { 
        // Add asterisk if needed 
        if (input.value && !input.value.startsWith("*")) {  
          input.value = "*" + input.value + "*";  
           console.log("input edited");  
        } 
        // Let the event continue naturally 
      } 
    }); 
 
  } else {  
    console.warn("Input or button still not found.");  
  }  
});
 
Thanks!

Categories:

General

Community site session details

How to change default List with Search enabled from "Begins With" to "Contains Logic"

Helpful resources

News and Announcements

Quick Links

Responsible AI policies

Tom Macfarlan – Community Spotlight

Congratulations to the September Top 10 Community Leaders!

Leaderboard > Power Pages

Featured topics

Product updates