Field auto completion

Questions related to using nuBuilder Forte.

Field auto completion

Postby marcvander » Tue Apr 10, 2018 7:16 pm

Hey,

I'm trying to implement a functionality which would auto complete a field when starting to type in it.
In my case, I have a table "company". Each company has a unique id (primary key), a name and other info. How can I build a function which would auto complete the field "company_name" when starting to type in it, based on other "company_name" entries in the table "company" ?

Shall it be made by adding javascript code to the object/form ?

I know that the lookup object has a auto complete option. I tested it and it works great. How can I have the same, but for a classic text object ?

Thanks,

Marc
Config:
nuBuilder v4 on a dedicated LAMP server:
-Ubuntu 14.04.5 LTS
-Apache 2.4.7
-MySQL 14.14 Distrib 5.7.22
-PHP 5.5.9-1ubuntu4.23
marcvander
 
Posts: 101
Joined: Tue Mar 27, 2018 1:27 am

Re: Field auto completion

Postby admin » Wed Apr 11, 2018 12:37 am

Marc,

You can't - not without you creating something complex with Javascript.

Steven
admin
Site Admin
 
Posts: 3162
Joined: Mon Jun 15, 2009 9:53 am

Re: Field auto completion

Postby toms » Wed Apr 11, 2018 12:50 am

You mean something like that?

https://jqueryui.com/autocomplete/

It's not too hard to integrate that into nuBuilder.
toms
 

Re: Field auto completion

Postby marcvander » Tue Apr 17, 2018 12:38 am

Hey toms,

thanks for the answer. I checked your link, I made a test by creating an HTML object, and it works ! See attached photo.

I used the given source code on the page you shared, how can I make it in a way so that it looks for values in my database and not pre-entered values ?

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
</head>
<body>

<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>


</body>
</html>
Attachments
Capture d’écran 2018-04-16 à 17.02.23.png
Capture d’écran 2018-04-16 à 17.02.23.png (223.8 KiB) Viewed 1947 times
Config:
nuBuilder v4 on a dedicated LAMP server:
-Ubuntu 14.04.5 LTS
-Apache 2.4.7
-MySQL 14.14 Distrib 5.7.22
-PHP 5.5.9-1ubuntu4.23
marcvander
 
Posts: 101
Joined: Tue Mar 27, 2018 1:27 am

Re: Field auto completion

Postby toms » Tue Apr 17, 2018 3:36 pm

One possiblity is to run a PHP function that runs a query to retrieve the company names and store them in an array. Then pass it as source to the autocomplete field.

1. Add a new procedure (Home ► Build Procedure)
procedure.PNG
procedure.PNG (16.37 KiB) Viewed 1940 times


Code: Select all
$sql = "SELECT company_name FROM company";
$retval = nuRunQuery($sql);
$row_arr =  array();
$return_arr = array();
$p = '';

if($retval){
    while($row = db_fetch_row($retval)) {
        $row_arr['value']= $row;   
        array_push($return_arr,$row_arr);   
    }
    $p = json_encode($return_arr);
}

$j = " nuSetProperty('arrCompanyNames',$p); initAutoComplete();";
nuJavascriptCallback($j);


2. In your form's javascript field add:

Code: Select all
if (nuFormType() == 'edit') {
    nuRunPHPHidden('companynames', 1);
}



3. To initialize the autocomplete on an existing nuBuilder field (add also in your form's javascript field)

Code: Select all
function initAutoComplete() {
    $("#yourfield").autocomplete({ << -- --change
        source: nuGetProperty('arrCompanyNames'),
        minLength: 1,
        select: function(event, ui) {
            $(event.target).val(ui.item.value).change();
        }
    });
}
toms
 

Re: Field auto completion

Postby marcvander » Thu Apr 19, 2018 12:12 am

Hey toms,

thanks so much for your help. So I implemented what you showed me, and still doesn't work. Here is what I did:

1- I created a procedure:
Capture d’écran 2018-04-18 à 16.36.16.png
Capture d’écran 2018-04-18 à 16.36.16.png (121.74 KiB) Viewed 1925 times


2- I adapted the sql query to my database:
Capture d’écran 2018-04-18 à 16.36.25.png
Capture d’écran 2018-04-18 à 16.36.25.png (176.42 KiB) Viewed 1925 times


3- I added a custom javascript code to the form:
Capture d’écran 2018-04-18 à 16.33.36.png
Capture d’écran 2018-04-18 à 16.33.36.png (195.97 KiB) Viewed 1925 times


4- I added a HTML object in the form:
Capture d’écran 2018-04-18 à 16.34.29.png
Capture d’écran 2018-04-18 à 16.34.29.png (199.47 KiB) Viewed 1925 times


5- With a custom HTML code:
Capture d’écran 2018-04-18 à 16.34.37.png
Capture d’écran 2018-04-18 à 16.34.37.png (118.39 KiB) Viewed 1925 times


6- Here is how the front end looks like:
Capture d’écran 2018-04-18 à 16.34.58.png
Capture d’écran 2018-04-18 à 16.34.58.png (200.81 KiB) Viewed 1925 times


So the field shows, but anything I type inside doesn't save, and doesn't do auto completion

Any idea what I got wrong ?

EDIT: I figured out that I forgot to add the jQuery library. Where should I add :
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Config:
nuBuilder v4 on a dedicated LAMP server:
-Ubuntu 14.04.5 LTS
-Apache 2.4.7
-MySQL 14.14 Distrib 5.7.22
-PHP 5.5.9-1ubuntu4.23
marcvander
 
Posts: 101
Joined: Tue Mar 27, 2018 1:27 am

Re: Field auto completion

Postby toms » Thu Apr 19, 2018 1:08 am

The external references can be added under Home ► Setup ► Header
toms
 

Re: Field auto completion

Postby marcvander » Fri Apr 20, 2018 9:26 pm

Hey toms,

thanks. I added the external references under Home -> Setup -> Header, but it still doesn't work. Any idea where that might come from?

To recap what I've done:
1- created a PHP procedure
2- added javascript code under form's custom code javascript box
3- changed my company_name text object to a HTML object, with <input> tag
4- added in Home -> Setup -> Header the two <script> tag to insert jQuery libraries
Config:
nuBuilder v4 on a dedicated LAMP server:
-Ubuntu 14.04.5 LTS
-Apache 2.4.7
-MySQL 14.14 Distrib 5.7.22
-PHP 5.5.9-1ubuntu4.23
marcvander
 
Posts: 101
Joined: Tue Mar 27, 2018 1:27 am

Re: Field auto completion

Postby toms » Fri Apr 20, 2018 10:48 pm

I initially assumed you were asking the question for nuBuilder Forte (v4). In v3, some functions had other names. Therefore you need to make some changes to the codes.

1. Javascript Code of your Form:

Code: Select all
function initAutoComplete(param) {
    $("#entreprise_nom").autocomplete({
        source: JSON.parse(param),
        minLength: 1,
        select: function(event, ui) {
            $(event.target).val(ui.item.value).change();
        }
    });
}

function nuLoadEdit() {
   nuAjax('FieldAutoCompletion','initAutoComplete');
}   


2. PHP Procedure:

Code: Select all
$sql = "SELECT entreprise_nom FROM entreprise";
$retval = nuRunQuery($sql);
$row_arr =  array();
$return_arr = array();

if($retval){
    while($row = db_fetch_row($retval)) {
        $row_arr['value']= $row;   
        array_push($return_arr,$row_arr);   
    }
    $nuParameters = json_encode($return_arr);
}


3. BTW, you don't need to include jquery, because it already comes with nuBuilder. Just add jquery-ui.js (or make a copy on your server to avoid external links)

Code: Select all
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


4. You don't need a html object. Just use a nuBuilder object (Type: text)
toms
 

Re: Field auto completion

Postby admin » Sun Apr 22, 2018 10:06 am

.
admin
Site Admin
 
Posts: 3162
Joined: Mon Jun 15, 2009 9:53 am

Next

Return to General



cron