saseow
Posts: 744
|
| Posted: 01/21/2010, 12:38 AM |
|
I have a form with two text boxes fed by an Ajax autocomplete service. The first looks up a persons name and the second looks up products.
Is it possible to create a 'dependent list box' type of scenario? I.E. once a person is selected the second box will only show the products for that individual. In other words, dynamically change the sql where clause for the product service.
If this cannot be done, is it possible to make the products box a listbox and dynamically change the where clause on that depending on the person selected.
Hoping someone has done this!
|
 |
 |
mamboBROWN
Posts: 1713
|
| Posted: 01/21/2010, 5:01 AM |
|
saseow,
I don't know if you had a chance to look at the CCS example packs but they may be helpful to you ( http://examples.codecharge.com/ ). Here is the example that I think may be of use to you: http://examples.codecharge.com/Ajax/DependentListBox2.php
|
|
|
|
saseow
Posts: 744
|
| Posted: 01/21/2010, 5:38 AM |
|
Hi mamboBrown,
This is great but the client wants to have the autocomplete functionality. I may just have to try and talk him into two dependent listboxes as per the example. It would be perfect if both listboxes were autocomplete textboxes.
Thank you for your reply!
|
|
|
|
pschmid0
Posts: 8
|
| Posted: 05/25/2010, 8:12 AM |
|
Okay, I am working on the same thing. Did you find a solution saseow?
I am implementing a order entry system but have hundreds of thousands of products. A dependent list box is totally unworkable. An auto complete would be great if I could filter the input with another form input (brand).
BTW, I am using an editable grid.
Any suggestions are welcome!
|
|
|
|
saseow
Posts: 744
|
| Posted: 05/25/2010, 8:49 AM |
|
Nope, I never did find a solution as I had deadline to meet.
If you are successful, please post it here.
Regards,
Trevor
|
|
|
|
pschmid0
Posts: 8
|
| Posted: 05/25/2010, 12:36 PM |
|
Trevor,
Thanks for the reply. I looked into how it could be done with YUI and didn't see an easy way. The version is old and there is a new YUI of autocomplete. I don't know if upgrading would make things easier.
I am going to put that aside for the moment and work on some other parts. If I find anything when I revisit this later, I'll post here.
Paul
|
|
|
|
saseow
Posts: 744
|
| Posted: 05/25/2010, 6:12 PM |
|
Hi Paul,
Thanks for the info. Let's hope.
Trevor
|
|
|
|
pschmid0
Posts: 8
|
| Posted: 05/26/2010, 5:51 AM |
|
Here are details that I found.
AutoComplete was upgraded from the version in CCS 4. CCS 4 version of AutoComplete is 2.5.2. There have been some changes in YUI 2.6.0 that, if you use a newer version, won't necessarily work.
The change that needs to be made in AutoComplete is to set scriptQueryAppend to pass the value to the service handling the Ajax. scriptQueryAppend is part of DS_XHR. But, I don't know where you can get access to the DS_XHR except by rewriting autocomplete-commons.js. There is also an overridable method called doBeforeSendQuery to modify the query. I don't think you can add a parameter here, but maybe it could be used to set the scriptQueryAppend?
Version 2.6.0 upgraded and this is in the notes: The YAHOO.widget.DS_XHR properties scriptQueryParam and scriptQueryAppend have been deprecated in favor of the new customizable YAHOO.widget.AutoComplete method generateRequest().
Let me know if you can figure out anything.
Paul
|
|
|
|
saseow
Posts: 744
|
| Posted: 05/26/2010, 7:46 AM |
|
Hi Paul,
Thank you for this. I will certainly check this out in a week or two when I have completed a project I am busy with and will certainly let you know the results here.
Once again, thank you very much!
Trevor
|
|
|
|
pschmid0
Posts: 8
|
| Posted: 06/03/2010, 1:25 PM |
|
Well, I spent too much time on this, but finally came up with a solution. It is imperfect -- it looks like it does the ajax call for the list even on backspace or to continue typing. The solution will work for editable grids, also.
There are two steps to get this to work.
1) Use the code below to replace what is currently in autocomplete-common.js
2) Add an Onload event to the textbox to call the function initAutocompleteDependency that was defined in the new code.
New autocomplete-common.js:
// Added so we could save any dependencies for the autocomplete
var AutocompleteDependencies = new Array();
var fieldName = new Array();
// End additional code
function initAutocomplete(controlId, serviceUrl)
{
function createAutocomplete(id, serviceUrl)
{
function createSpanIfNotExists(id, parent)
{
var control;
if (!(control = document.getElementById(id)))
{
control = document.createElement("div");
control.setAttribute("id", id);
parent.appendChild(control);
}
control.className = controlId + "_container";
}
var autocomplete_ds = new YAHOO.widget.DS_XHR(serviceUrl, ["Result", "0"]);
autocomplete_ds.queryMatchContains = true;
createSpanIfNotExists(id + "_container", document.getElementById(id).parentNode);
autocomplete = new YAHOO.widget.AutoComplete(id, id + '_container', autocomplete_ds);
autocomplete.highlightClassName = "YUIAutcompleteHighlight";
autocomplete.prehighlightClassName = "YUIAutcompletePreHighlight";
autocomplete.doBeforeExpandContainer = function(oTextbox, oContainer, sQuery, aResults) {
var pos = YAHOO.util.Dom.getXY(oTextbox);
pos[1] += YAHOO.util.Dom.get(oTextbox).offsetHeight;
YAHOO.util.Dom.setXY(oContainer,pos);
return true;
};
// Added to do dependent functions
autocomplete.doBeforeSendQuery = function(sQuery)
{
var elName = new Array();
elName = this._sName.split(' ');
if (typeof(AutocompleteDependencies[elName[1]]) != 'undefined')
{
var el = document.getElementById(AutocompleteDependencies[elName[1]]);
return sQuery + "&" + fieldName[elName[1]] + "=" + el.value;
}
else
return sQuery;
}
// End additional code
}
if (document.getElementById(controlId))
createAutocomplete(controlId, serviceUrl);
var i = 0;
while (document.getElementById(controlId + "_" + (++i)))
createAutocomplete(controlId + "_" + i, serviceUrl);
}
// Add function to add the values for getting the dependent field
// ControlId is the same as the one called for InitAutocomplete
// otherID is the name of the other control (could be a listbox)
// name of parameter that is being sent to the service
function initAutocompleteDependency(controlId, otherId, name)
{
if (document.getElementById(controlId))
{
fieldName[controlId] = name;
AutocompleteDependencies[controlId] = otherId;
}
var i = 0;
while (document.getElementById(controlId + "_" + (++i)))
{
fieldName[controlId + "_" + i] = name;
AutocompleteDependencies[controlId + "_" + i] = otherId + "_" + i;
}
}
// End additional code
|
|
|
|
saseow
Posts: 744
|
| Posted: 06/03/2010, 4:11 PM |
|
well pschmid0, you have sure been busy but I thank you for this.
I am going to try this as soon as time permits and will let you know if anything else comes up.
Thank you very much!
Best regards,
Trevor
|
|
|
|
|
