Jump to content
  • 1

Auto Search


IamBlossom
 Share

Question

9 answers to this question

Recommended Posts

  • 0

Hi @IamBlossom,

To hide the Search button paste this in the Header of Search and Report Wizard - Configure Filtering Fields:

<style>

td[class*="cbSearchButtonContainer"] {
display: none !important;
}

</style>

For the automatic search, paste this in the Footer:

<script>
document.addEventListener('DataPageReady', () => {
var thisDP = document.querySelector(`[action*='[@cbAppKey]']`)
var field = thisDP .querySelector('#Value1_1');
var submitButton = thisDP .querySelector('.cbSearchButton');
field.onchange = function(){ submitButton.click() };
})
</script>

 

Hope this helps. 

 

-kristina

Link to comment
Share on other sites

  • 0

Hi @kristina, I believe you need to remove the space between thisDP and .querySelector. There are two instances of this in your code which results to a syntax error (^_^)v


In addition, everyone else may also try this version of JS by putting this on an HTML Block in their search form:

<script>

var thisDP = document.querySelector(`[action*="[@cbAppKey]"]`);

thisDP.addEventListener('change', function() {
  console.log('Changed!');
  thisDP.querySelector('.cbSearchButton').click();
});

</script>

 

This will automatically hit search everytime an input value has been changed, then put out-of-focus.

 

Hope this helps.
-DN31337!

Link to comment
Share on other sites

  • 0

Thanks @kristina and @DefinitelyNot31337 I am using this in several reports to great effect. However, when I have cascading fields, I run into two problems.

- For @kristina's solution, the naming convention of the fields changes and it appears as if they are attached a random suffix so setting the field variable is not successful. Below is the code I am using in the footer of the page.

<script>
document.addEventListener('DataPageReady', () => {
var thisDP = document.querySelector(`[action*='[@cbAppKey]']`)
var field1 = thisDP.querySelector('#Value1_1');
var field2 = thisDP.querySelector('#Value2_1');
var field3 = thisDP.querySelector('#Value3_1');
var field4 = thisDP.querySelector('#Value4_1');
var submitButton = thisDP.querySelector('.cbSearchButton');
field1.onchange = function(){ submitButton.click() };
field2.onchange = function(){ submitButton.click() };
field3.onchange = function(){ submitButton.click() };
field4.onchange = function(){ submitButton.click() };

})
</script>

- For @DefinitelyNot31337's solution in the HTML block, it constantly is recalculating when I have cascading values so I can't interact with the page.

 

Anyone have thoughts on how to resolve this? I am obviously not a great js coder and kind of hacking this together so I really appreciate the help.

Link to comment
Share on other sites

  • 0

I had a chance to get back to this and did find a way to reference the search criteria with a wildcard search. 

<script>
document.addEventListener('DataPageReady', () => {
var thisDP = document.querySelector(`[action*='[@cbAppKey]']`)
var field = thisDP.querySelector('select[id^="Value1_1"]');
var field1 = thisDP.querySelector('select[id^="Value2_1"]');
var field2 = thisDP.querySelector('select[id^="Value3_1"]');
var submitButton = thisDP.querySelector('.cbSearchButton');
field.onchange = function(){ submitButton.click() };
field1.onclick = function(){ submitButton.click() };
field2.onchange = function(){ submitButton.click() };
})
</script>

In the above example, the value set is field1 is set from a cascading drop down. If I make it a cascading listbox, it works great. If I use onchange it spins constantly and I cannot interact with the page (looks like it is looping). When it is a dropdown, the "onclick" event triggers as soon as I hit the box to drop it down. I need to use drop downs due space on the page and user experience, but this one has me totally stonewalled. Anyone have any thoughts?

Link to comment
Share on other sites

  • 0

Hi there

I have two questions:

1- when I try to add the style of hide the search  button not working " i try to add in all the header sections but not working"

2- the autosearch is fine but u need to move out side the textbox to take action, what i need is take the search action once any character is written.

https://c2acp467.caspio.com/dp/3dd3a0007129a954a5fe4bdeaeeb

try search  using "a" or "s"

thanks.

Link to comment
Share on other sites

  • 0
11 hours ago, AhmeAlnaqa said:

Hi there

I have two questions:

1- when I try to add the style of hide the search  button not working " i try to add in all the header sections but not working"

2- the autosearch is fine but u need to move out side the textbox to take action, what i need is take the search action once any character is written.

https://c2acp467.caspio.com/dp/3dd3a0007129a954a5fe4bdeaeeb

try search  using "a" or "s"

thanks.

What's your code? What's the issue of 1 again?

use "input" instead of "change" for your event listener (it will trigger on the FIRST keypress tho)

 

Link to comment
Share on other sites

  • 0
9 hours ago, AhmeAlnaqa said:

thanks @TellMeWhy

for the 2 one it's solved..

 

the hide problem .. it's not hide  !! i don't know why if u mind can u show me screenshot from the place"screen wizard" that i have to add the hide code 

 

thanks again

Idk, I just do this?
image.png.57ad16c5a176a5b0aa87558d79454278.png

 

<style>
.cbSearchButton{
display:none !important;
}

</style>

Does it not work for you?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...