Modify search behavior in tableview (?)

The recommended method of customizing your AppGini-generated application is through hooks. But sometimes you might need to add functionality not accessible through hooks. You can discuss this here.
Post Reply
User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Modify search behavior in tableview (?)

Post by D Oliveira » 2020-06-01 13:59

Hello folks, I got a problem, hopefully someone can help.

Imagine a record name is "Chicken Breast Fried"

if you search "chicken breast" or "breast fried" your search will return successfully, but if you try to search "chicken fried" it wont show, does anyone know how to modify this search behavior or at least point me to the file where I can check the query? Thank you!

*The long way would be to get an algorithm to make all possible name combinations with the original name and insert all possibilities in a field named "keywords" just so it matches any search but that seems like a waste, hopefully there is a better way.

User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: Modify search behavior in tableview (?)

Post by D Oliveira » 2020-06-01 15:25

not an appgini solution but here it goes guys:

reference: https://selectize.github.io/selectize.js/

1- hide your search input for $SearchString (appgini's default quick search)

2- add the code in the tablename_view.php above echo $x->HTML;

Code: Select all


<?php

<br><br><br><br>

<div style="margin: 0 auto;text-align: center;">

<img src="foods.png?id=9" style="width: 57px;height: auto;" ></img>

</div>

<br>
					

<div class="wrapper">

//db connection

$con = mysqli_connect($dbServer, $dbUsername, $dbPassword);
mysqli_select_db($con,$dbDatabase);

$con->set_charset("utf8");

		$result = $con->query("select * from foods order by name ASC ");

				    echo '<html>';
				    echo '<body>';
						
				    echo '<select id="ss1" onchange="searchterm();" style="display: block;margin: 0 auto;text-align: center;width:300px;height:auto;" class="select-css" >';
				  
				    echo '<option style="text-transform:uppercase;color:black;" value="">🔎 SEARCH</option>';
				   
				    echo '<option style="text-transform:uppercase;color:black;" value="x">🔎 SEE ALL</option>';

				    

				    while ($row = $result->fetch_assoc()) {

				                  unset($idx, $name);
				                  $idx = $row['ID'];
				                  $name = mb_strtoupper($row['name'], "UTF-8");
				                  echo '<option style="text-transform:uppercase;color:black;" value='.$idx.'>'.'🔍 '.$name.'</option>';

					}

				    echo '</select>';
				    
				    
				    echo '<br><br><p id="ult_" style="  border-top-left-radius: 5px; border-top-right-radius: 5px;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;color:white;font-family:Gotham2;font-size:18px;text-align:center;" ></p>';
				  
				  
				    echo '<p id="ult" style="  padding:3px;padding-bottom:4px;border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;background-color:rgba(122,122,122,0.3);color:white;font-family:Gotham2;font-size:20px;text-align:center;width: fit-content;margin:0 auto;" ></p>';				
				    
				    echo '</body>';
				    echo '</html>';

				 ?> 
				 
					</div>
							
		<!--</div>-->
		</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>		

<script type="text/javascript">

jQuery(document).ready(function () {
     jQuery('.select-css').selectize({
          //sortField: 'text'
      });

  });

var selectedProduct = sessionStorage.getItem("foods");

if(selectedProduct != undefined || selectedProduct != null){


$j('#ult_').text('👇');
var ultt = '\xa0\xa0'+selectedProduct.substr(0,selectedProduct.length)+'\xa0\xa0';
$j('#ult').text(ultt.toUpperCase());

}



    function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
    }



	function searchterm(){

		var lennn = document.getElementById("ss1").options[document.getElementById("ss1").selectedIndex].text.length;

		term = document.getElementById("ss1").options[document.getElementById("ss1").selectedIndex].text.substr(3, lennn);

		term2 = document.getElementById("ss1").options[document.getElementById("ss1").selectedIndex].text;


		sessionStorage.setItem("foods", term.toUpperCase());

		var replaced = term.split(' ').join('+');

		console.log('auto'+term)

		if(term2 == '🔎 SEE ALL'){

			window.location.assign('/fitbook/foods_view.php?SortField=2&SortDirection=asc&FilterAnd%5B1%5D=and&FilterField%5B1%5D=2&FilterOperator%5B1%5D=equal-to&FilterValue%5B1%5D=');


		}else{

			window.location.assign('/fitbook/foods_view.php?SortField=2&SortDirection=asc&FilterAnd%5B1%5D=and&FilterField%5B1%5D=2&FilterOperator%5B1%5D=equal-to&FilterValue%5B1%5D='+term);

		
		}



	}




</script>			


image:
https://ibb.co/qRYbYdy

video:
https://streamable.com/boz3c0

User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: Modify search behavior in tableview (?)

Post by D Oliveira » 2020-06-01 16:10

even though I have solved the issue with tableview I cannot replicate this behavior in a select2 inside detail view, anyone know how to modify the search behavior in that scenario? Thank you

User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: Modify search behavior in tableview (?)

Post by D Oliveira » 2020-06-01 16:27

something like:

https://jsfiddle.net/adigas/2g1q5ypn/

Image

that doesnt work with appgini =(

User avatar
a.gneady
Site Admin
Posts: 1281
Joined: 2012-09-27 14:46
Contact:

Re: Modify search behavior in tableview (?)

Post by a.gneady » 2020-06-01 20:30

You might find MySQL's full text natural language search useful here: https://dev.mysql.com/doc/refman/8.0/en ... guage.html

We posted a tutorial on applying full text search in AppGini some while ago here: https://bigprof.com/blog/appgini/using- ... gini-apps/
:idea: AppGini plugins to add more power to your apps:
  • DataTalk is an innovative AppGini plugin based on ChatGPT that allows you to interact with your AppGini database using natural language questions, without writing any SQL. Check the demo video
  • Mass Update plugin: Update multiple records at once and improve your workflow efficiency.
  • Check our other plugins and get a generous discount of up to 30% when buying 2 or more plugins.

User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: Modify search behavior in tableview (?)

Post by D Oliveira » 2020-06-01 20:31

I've managed to make the feature work for the tableview search, even though I need more specific directions to change the functionality of select2 inside detail view, theres is no select element to work on, its in a div

User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: Modify search behavior in tableview (?)

Post by D Oliveira » 2020-06-01 20:59

is there a way to build a query using php in the _dv.html templates files? because then I could use selectize for that as well

the select2 inside _DV template is a lookup field, and I'll try to re-engineer that with selectize

User avatar
a.gneady
Site Admin
Posts: 1281
Joined: 2012-09-27 14:46
Contact:

Re: Modify search behavior in tableview (?)

Post by a.gneady » 2020-06-02 20:22

is there a way to build a query using php in the _dv.html templates files?
No, this is an html file. PHP code placed in it won't be parsed. But you could use the tablename_dv() hook function instead.
:idea: AppGini plugins to add more power to your apps:
  • DataTalk is an innovative AppGini plugin based on ChatGPT that allows you to interact with your AppGini database using natural language questions, without writing any SQL. Check the demo video
  • Mass Update plugin: Update multiple records at once and improve your workflow efficiency.
  • Check our other plugins and get a generous discount of up to 30% when buying 2 or more plugins.

pfrumkin
Veteran Member
Posts: 157
Joined: 2020-02-18 17:58
Location: Albuquerque, New Mexico USA

Re: Modify search behavior in tableview (?)

Post by pfrumkin » 2020-06-03 16:20

Could you embed js in the html, make ajax call within that?

User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: Modify search behavior in tableview (?)

Post by D Oliveira » 2020-06-03 18:03

pfrumkin wrote:
2020-06-03 16:20
Could you embed js in the html, make ajax call within that?
yes that did it! Im not gonna extend here because there was a lot of code for it to work, but if someone wants the answer it is html+js with ajax, inside ajax file make the while echo each option and on success function of ajax append those to select. Thanks guys

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: Modify search behavior in tableview (?)

Post by onoehring » 2020-06-10 15:14

Hi,

a late suggestion: Maybe intercept the search after it has been submitted. Split the search phrase (by spaces) and build a new search string from that (WHERE x='chicken' OR x='breast' ...). Pass that along to the page and use it as options->sqlwhere variable?

Olaf

User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: Modify search behavior in tableview (?)

Post by D Oliveira » 2020-06-10 15:40

thank you for taking the time, I personally think selectize looks better than the usual select2 box, I know a lot can be done with .css but still prefer selectize, also Im not sure about the search time using that method within a table with millions of records, take a look at the finished work at fitbookapp.net/fitbook user: teste password: teste and then click on "comunidade" thanks a lot =) cheers!

Post Reply