Page 1 of 2

Field auto completion

PostPosted: Tue Apr 10, 2018 7:16 pm
by marcvander
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

Re: Field auto completion

PostPosted: Wed Apr 11, 2018 12:37 am
by admin
Marc,

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

Steven

Re: Field auto completion

PostPosted: Wed Apr 11, 2018 12:50 am
by toms
You mean something like that?

https://jqueryui.com/autocomplete/

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

Re: Field auto completion

PostPosted: Tue Apr 17, 2018 12:38 am
by marcvander
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>

Re: Field auto completion

PostPosted: Tue Apr 17, 2018 3:36 pm
by toms
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 1948 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();
        }
    });
}

Re: Field auto completion

PostPosted: Thu Apr 19, 2018 12:12 am
by marcvander
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 1933 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 1933 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 1933 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 1933 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 1933 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 1933 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>

Re: Field auto completion

PostPosted: Thu Apr 19, 2018 1:08 am
by toms
The external references can be added under Home ► Setup ► Header

Re: Field auto completion

PostPosted: Fri Apr 20, 2018 9:26 pm
by marcvander
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

Re: Field auto completion

PostPosted: Fri Apr 20, 2018 10:48 pm
by toms
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)

Re: Field auto completion

PostPosted: Sun Apr 22, 2018 10:06 am
by admin
.