Transform Search Field

[nc07]

Hi,

Sharing Code to transform search field =>

chrome-capture-2023-8-6 (1).gif

JS code:

Code: Select all

function nuTranfomSearchBox() {

	$('#nuSearchField,#nuSearchButton,#nuFilter').wrapAll('<div id="nuSeachCombo"></div>');
	$("#nuSearchField").attr("placeholder", "Search");
	$("#nuSearchField").focus();
	$('#nuSearchField').on('input', function() {
		if ($(this).val() !== '') {
			$(this).addClass('has-value'); // Add a class if the field is not empty
		} else {
			$(this).removeClass('has-value'); // Remove the class if the field is empty
		}

	});
}

The function can be called from Header or individual form's js.

Code: Select all

if (nuFormType() == 'browse') {

	nuTranfomSearchBox();

}

CSS:

Code: Select all

.nuActionHolder {
     height: 2px;
     height: auto !important;
     width: 100%;
     display: flex;
    /*flex-wrap: wrap;
    */
     gap: 5px;
     flex-direction: row;
     align-items: baseline 
}
 #nuSeachCombo {
     display: flex;
     gap: 0;
     order: 1;
}
 .nuSearch {
     height: 26px;
     padding: 0 0 0 10px;
     border-radius: 10px 0 0 10px;
     margin-left: 10px;
     transition: border-color .2s ease;
     vertical-align: middle!important;
     order: 1;
     margin-right: 0;
}
 #nuSearchField:empty{
     width: 40%;
}
 #nuSearchButton {
     border-radius: 0 10px 10px 0;
     margin-left: 0;
     height: 26px;
     order: 2;
     width:28%;
}
 #nuFilter{
     order:3;
}
 #nuSearchField.has-value, #nuSearchField:focus {
     width: 70%;
}

Though might be useful to someone.

[kev1n]

Hi Nilesh,

Thanks for sharing your code!

I've observed an issue: the search box keeps changing its size (and hence keeps "jumping") when I repeatedly click the search button. Is there a way to prevent this resizing behavior?

Video_2023-09-06_084716.gif

[nc07]

It is only suppose to increase size when in search box is in focus or has value else maintains small size.

Is that the behaviour you experiencing. To keep it to one side you can comment off the last css.

I will check it out and come back.

[nc07]

Hi Kevin,

Here is an updated CSS, No more resizing.

The reason for the unusual behavior of resizing was if the search field was empty and lost focus, it would resize to 40%. if the field was not empty then everything worked well.

Code: Select all

.nuActionHolder {
    height: 2px;
    height: auto !important;
    width: 100%;
    display: flex;
    /*flex-wrap: wrap;*/
    gap: 5px;
    flex-direction: row;
    align-items: baseline
}
#nuSeachCombo {
    display: flex;
    gap: 0;
    order: 1;
}


.nuSearch {
    height: 26px;
    padding: 0 0 0 10px;
    border-radius: 10px 0 0 10px;
    margin-left: 10px;
    transition: border-color .2s ease;
    vertical-align: middle!important;
    order: 1;
    margin-right: 0;
    
}
/*#nuSearchField:empty{*/
/*  width: 40%; */
/*}*/

#nuSearchButton {
    border-radius: 0 10px 10px 0;
    margin-left: 0;
    height: 26px;
    
order: 2;
width:28%;
}
#nuFilter{
    order:3;
}

#nuSearchField {
  width: 70%; 
}

[kev1n]

I created a new form, but the order of the buttons on the browse form is messed up.

display.png

[nc07]

I created a new form, but the order of the buttons on the browse form is messed up.

display.png

Hi Kevin,

Thats because nuActionHolder is now displayed flex.

Code: Select all

#nuSeachCombo {
    display: flex;
    gap: 0;
    order: 0;
}

This should put search box to first position.

chrome-capture-2023-8-8.png

[kev1n]

Thanks, I will test again more thoroughly

[kev1n]

I want the dev buttons (AS, BS etc. ) still to be on top of the search field, button as it's the case now.

buttons.png

[nc07]

Hi Kevin,

Below is the update code, kindly test it and let me know.

JS

Code: Select all

function nuTransformSearchBox() {
    $('#nuSearchField,#nuSearchButton,#nuFilter').wrapAll('<div id="nuSeachCombo"></div>');
    $('.nuAdminButton').wrapAll('<div class="adminButtonGroup"></div>');
 $('.nuActionButton, #nuSeachCombo').not('.nuAdminButton').not('#nuPreviewButton').not('#nuSearchButton').not('span').wrapAll('<div class="actionButtonGroup"></div>');
$('#nuSearchField')
.attr('placeholder', 'Search')
.focus();
    
}

CSS

Code: Select all

.nuActionHolder {
   
    height: auto !important;
    width: 100%;
    display: flex;
  
    gap: 0;
    flex-direction: column;
    align-items: baseline;
    /*padding: 10px;*/
}
#nuSeachCombo {
    display: flex;
    gap: 0;
    order: 0;

}


.nuSearch {
    height: 26px;
    padding: 0 0 0 10px;
    border-radius: 10px 0 0 10px;
    margin-left: 10px;
    transition: border-color .2s ease;
    vertical-align: middle!important;
    order: 1;
    margin-right: 0;
    
}


#nuSearchButton {
    border-radius: 0 10px 10px 0;
    margin-left: 0;
    height: 26px;
    
order: 2;
width:28%;
}
#nuFilter{
    order:3;
}

#nuSearchField {
  width: 70%; 
}
.actionButtonGroup{
    display: flex;
    align-items: baseline;
}
.adminButtonGroup{
    padding: 2px;
    height: 15px;
}

[kev1n]

Now it looks like this. Does it look right for you?

2023-09-14_093739.png