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
Field auto completion
12 posts
• Page 1 of 2 • 1, 2
Field auto completion
by marcvander » Tue Apr 10, 2018 7:16 pm
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
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
by admin » Wed Apr 11, 2018 12:37 am
Marc,
You can't - not without you creating something complex with Javascript.
Steven
You can't - not without you creating something complex with Javascript.
Steven
- admin
- Site Admin
- Posts: 3094
- Joined: Mon Jun 15, 2009 9:53 am
Re: Field auto completion
by 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.
https://jqueryui.com/autocomplete/
It's not too hard to integrate that into nuBuilder.
- toms
Re: Field auto completion
by 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>
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 (223.8 KiB) Viewed 1505 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
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
by 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)
2. In your form's javascript field add:
3. To initialize the autocomplete on an existing nuBuilder field (add also in your form's javascript field)
1. Add a new procedure (Home ► Build Procedure)
- procedure.PNG (16.37 KiB) Viewed 1498 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
by 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:
2- I adapted the sql query to my database:
3- I added a custom javascript code to the form:
4- I added a HTML object in the form:
5- With a custom HTML code:
6- Here is how the front end looks like:
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>
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 (121.74 KiB) Viewed 1483 times
2- I adapted the sql query to my database:
- Capture d’écran 2018-04-18 à 16.36.25.png (176.42 KiB) Viewed 1483 times
3- I added a custom javascript code to the form:
- Capture d’écran 2018-04-18 à 16.33.36.png (195.97 KiB) Viewed 1483 times
4- I added a HTML object in the form:
- Capture d’écran 2018-04-18 à 16.34.29.png (199.47 KiB) Viewed 1483 times
5- With a custom HTML code:
- Capture d’écran 2018-04-18 à 16.34.37.png (118.39 KiB) Viewed 1483 times
6- Here is how the front end looks like:
- Capture d’écran 2018-04-18 à 16.34.58.png (200.81 KiB) Viewed 1483 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
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
by toms » Thu Apr 19, 2018 1:08 am
The external references can be added under Home ► Setup ► Header
- toms
Re: Field auto completion
by 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
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
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
by 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:
2. PHP Procedure:
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)
4. You don't need a html object. Just use a nuBuilder object (Type: text)
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
12 posts
• Page 1 of 2 • 1, 2