How to place search field in Navbar?

sagmag · Post by **sagmag** » Fri Dec 29, 2017 5:18 am

I would like to have a search field in the navigation bar and when the user will submit the the form, I will return a page with information corresponding to the user's research. I don't know how to proceed with that. Is there any easy way?

danielc · Post by **danielc** » Fri Dec 29, 2017 2:00 pm

You can only search a table or view. Just copy the HTML form of Quick Search from that page to where you want, change the action attribute of the form to the List page of that table.

kirondedshem · Post by **kirondedshem** » Fri Dec 29, 2017 2:19 pm

I would like to have a search field in the navigation bar

you can add your html form which submits to a given php page using jquery in startup script, for example am adding a text box which submits to my_tablelist.php page, just put this code in desired startup script and it will add it to side bar. If you put it in global startup script it will be drawn for every page so as long as you have handled how its used.You have to handle how the submitted data is used in seraching and when on your own.
//Add a form with a text box submitting to a given page
$(".sidebar").prepend('<form action="my_tablelist.php" method="get" class="sidebar-form"><div class="input-group"><input name="field_name" id="field_name" class="form-control" placeholder="Search..." type="text"><span class="input-group-btn"><button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button></span></div></form>');
You can also move an element dynamically using jquery, using this you can move the default quick searchbox or an extended search input controll to anywhere you want during runtime, for your case you can move them into the navbar and they will still work the same. just google how to move an element using jquery.

sagmag · Post by **sagmag** » Fri Dec 29, 2017 2:40 pm

$(".sidebar").prepend('<form action="my_tablelist.php" method="get" class="sidebar-form"><div class="input-group"><input name="field_name" id="field_name" class="form-control" placeholder="Search..." >type="text"><span class="input-group-btn"><button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button></span></div></form>');
I don't get what this code is trying to do so you mean that every page has a side bar to which I can add whatever I want ? And how does that sidebar react on a small screen(mobile device?

kirondedshem · Post by **kirondedshem** » Fri Dec 29, 2017 2:45 pm

if you are using phpmaker 2018 then it uses admin lte which has a sidebar if you are using a veritcal menu. It seems to be mobile responsive as I coped it from the admin LTE template itsself

For example paste this in console log while any phpmaker 2018 site is open site is open. YOu should see its effect

ALTHOUGH this is just an example to show you how you would likely go about it, the look and feel is up to you

josecnp1 · Post by **josecnp1** » Fri Dec 29, 2017 11:26 pm

my code:

$(".sidebar").prepend('<form action="xxxxxxxxlist.php" method="get" class="sidebar-form"><div class="input-group"><input name="<?php echo EW_TABLE_BASIC_SEARCH ?>" id="<?php echo EW_TABLE_BASIC_SEARCH ?>" class="form-control" value="<?php echo ew_HtmlEncode($incidencias_list->BasicSearch->getKeyword()) ?>" placeholder="<?php echo ew_HtmlEncode($Language->Phrase("Search")) ?>" type="text"><span class="input-group-btn"><button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button></span></div></form>');

kirondedshem · Post by **kirondedshem** » Sat Dec 30, 2017 1:31 am

@josecnp1

<?php echo ew_HtmlEncode($incidencias_list->BasicSearch->getKeyword()) ?>
<?php echo EW_TABLE_BASIC_SEARCH ?>
I dont think its advisable to add phpcode using jquery since php is a server side language it wont be executed if added from te client side(unless you use ajax to process it first),
Alternatively you sould use ew_SetClientVar to pass a php value from server side so you can access it on clinet like like eg i page_load

ew_SetClientVar("basic_search", EW_TABLE_BASIC_SEARCH);
ew_SetClientVar("basic_search_keyword", ew_HtmlEncode($incidencias_list->BasicSearch->getKeyword()));

THen you can access it in client scripts as below eg in startup script

//get values passed from server side
var basic_search_value = ewVar.basic_search;
var basic_search_keyword_value = ewVar.basic_search_keyword;

//use them to draw the serach box
$(".sidebar").prepend('<form action="xxxxxxxxlist.php" method="get" class="sidebar-form"><div class="input-group"><input name="'+basic_search_value+'" id="'+basic_search_value+'" class="form-control" value="'+basic_search_keyword_value+'" placeholder="'+basic_search_keyword_value+'" type="text"><span class="input-group-btn"><button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button></span></div></form>');

kirondedshem · Post by **kirondedshem** » Sat Dec 30, 2017 1:46 am

@josecnp1
I ad forgotten the part where i paste it in a php page eventually, sorry about that

@sagmag
how does that sidebar react on a small screen(mobile device?
The code i gave should mobile responsive by default since i picked it from admin lte ie it still appears fine in mobile view as well, it can also submit to the desired form, although I too feel it still need a little twaeking here and there, just ensure to use mobile responsive classes to get one tat fits your needs