Field auto completion

marcvander · Unread post by **marcvander** » Tue Apr 10, 2018 11:46 am

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

Unread post by **admin** » Tue Apr 10, 2018 5:07 pm

Marc,

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

Steven

toms · Unread post by **toms** » Tue Apr 10, 2018 5:20 pm

You mean something like that?

https://jqueryui.com/autocomplete/

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

marcvander · Unread post by **marcvander** » Mon Apr 16, 2018 5:08 pm

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/jquer ... "></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>

toms · Unread post by **toms** » Tue Apr 17, 2018 8:06 am

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

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();
        }
    });
}

marcvander · Unread post by **marcvander** » Wed Apr 18, 2018 4:42 pm

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

2- I adapted the sql query to my database:

Capture d’écran 2018-04-18 à 16.36.25.png

3- I added a custom JavaScript code to the form:

Capture d’écran 2018-04-18 à 16.33.36.png

4- I added a HTML object in the form:

Capture d’écran 2018-04-18 à 16.34.29.png

5- With a custom HTML code:

Capture d’écran 2018-04-18 à 16.34.37.png

6- Here is how the front end looks like:

Capture d’écran 2018-04-18 à 16.34.58.png

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/jquer ... "></script>

toms · Unread post by **toms** » Wed Apr 18, 2018 5:38 pm

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

marcvander · Unread post by **marcvander** » Fri Apr 20, 2018 1:56 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

toms · Unread post by **toms** » Fri Apr 20, 2018 3:18 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)

Unread post by **admin** » Sun Apr 22, 2018 2:36 am

nuBuilder Forum

Field auto completion

Field auto completion

Re: Field auto completion

Re: Field auto completion

Re: Field auto completion

Re: Field auto completion

Re: Field auto completion

Re: Field auto completion

Re: Field auto completion

Re: Field auto completion

Re: Field auto completion