QAutoCompleteTextBox.class.php Discussion

thread: 44 messages  |  last: a year ago  |  started: monday, july 23, 2007, 6:53 pm pdt


#1  |  zenoyu (Sydney) Australia
Monday, July 23, 2007, 6:53 PM PDT

Added QAutoCompleteTextBox Using JQuery from:

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

You can download the QControl File from here:
<http://www.qcodo.com/downloads/item.php/132>

==== Installation ====
Download JQuery plugins from above link and save into the folder: /assets/js/
1> jquery.autocomplete.js
2> dimensions.js
3> jquery.bgiframe.min.js

Also Download the JQuery library from <http://jquery.com/> [Make sure the name is jquery.js]
4> jquery.js

And also save css into the folder: /assets/css/
5> jquery.autocomplete.css

Finally save the QAutoCompleteTextBox.class.php into the /includes/qcodo/qform folder
6> QAutoCompleteTextBox.class.php

====== Local Data set Example =====

$this->txtCompanyName = new QAutoCompleteTextBox($this);
$this->txtCompanyName->Name = QApplication::Translate('Keyword');
$objListItem = new QListItem('test', 1);
$this->txtCompanyName->AddItem($objListItem);

====== Modification of the jquery.autocomplete.js [included in zip download] =====
Just in case the jquery.autocomplete.js have new release in the future or you need some modification.
We have to modify the jquery.autocomplete.js to make it talks to Qcodo, look for the function request() and commented few lines from `jquery.ajax(` and replace with the code below:

// [Start]
           jQuery.post(    options.url,{
                           q: lastWord(term),
                           limit: options.max,
                           Qform__FormId: options.extraParams['Qform__FormId'],
                           Qform__FormState: $(“#Qform__FormState”).val(),
                           Qform__FormUpdates: '',
                           Qform__FormCheckableControls: '',
                           Qform__FormParameter: lastWord(term),
                           Qform__FormEvent: 'QAutoCompleteTextBoxEvent',
                           Qform__FormCallType: 'Ajax',
                           Qform__FormControl: options.extraParams['Qform__FormControl'] },
                       function(data) {
                           var parsed = options.parse && options.parse(data) || parse(data);
                           cache.add(term, parsed);
                           success(term, parsed);
                       }
                       );
// [End]
/*
           jQuery.ajax({
               url: options.url,
               data: jQuery.extend({
                   q: lastWord(term),
                   limit: options.max
               }, options.extraParams),
               success: function(data) {
                   var parsed = options.parse && options.parse(data) || parse(data);
                   cache.add(term, parsed);
                   success(term, parsed);
               }
           });
*/
====== QCodo Example =====
Sample Code:

$this->txtCompanyName = new QAutoCompleteTextBox($this);
$this->txtCompanyName->Name = QApplication::Translate('Keyword');
// $this->txtCompanyName->TextMode = QTextMode::MultiLine;
$this->txtCompanyName->UseAjax = true; // QAutoCompleteTextBoxEvent Action is needed for Ajax respond
$this->txtCompanyName->AddAction(new QAutoCompleteTextBoxEvent(), new QAjaxAction('txtCompanyName_Change'));

The function handle the Ajax autocompleter, $strParameter is user input:

public function txtCompanyName_Change($strFormId, $strControlId, $strParameter){
    $objMemberArray = 
        Member::QueryArray( QQ::Like(QQN::Member()->Name,$strParameter.'%'), QQ::Clause(QQ::OrderBy(QQN::Member()->Name)));
    foreach($objMemberArray as $objMember){
        echo $objMember->Name."\n";
    }
    exit;
}
.bc
#2  |  Chris Peterson (Seattle, WA) United States of America Qcodo Core Contributor
Tuesday, July 24, 2007, 3:13 AM PDT

Nice work!  I have some of the remote stuff working with a similiarly named control, just haven't had time to clean it up.  You beat me to it =)  I also have a complete QAction wrapper class for the jquery.Interface plugin I am going to try and release soon.  i will try and send you some samples of the remote stuff I have working and maybe you can integrate it with this control.

#3  |  Christophe Damour (Saint Laurent des Combes) France
Thursday, August 9, 2007, 1:29 AM PDT

Hi,

Thank you for that contribution, zenoyu, if find it very usefull.

I had to change autofill to autoFill in the GetScript function to have this option working.

Also, I tried to add the matchContains option - the same way you did for autoFill - but couldn't make it working... I just added member variable declaration, getter and setter and modified GetScript sprintf this way :

            return sprintf('$("#%s").autocomplete(%s,{%s%s%s});',
                        $this->strControlId,
                        $strJavascriptArray,
                        (($this->blnAutoFill)?"autoFill:true":"autoFill:false"),
                        (($this->blnMatchContains)?",matchContains:true":",matchContains:false"),
                        (($this->strTextMode==QTextMode::MultiLine)?",multiple:true":"")
                        );

Got an idea ?

Christophe

#4  |  Chris Peterson (Seattle, WA) United States of America Qcodo Core Contributor
Thursday, August 9, 2007, 10:25 PM PDT

Hey Christophe,

Did you the page give you a specific error?  I have found the Firebug with Firefox is an invaluable tool for debugging these types of JavaScript things.  I have built wrappers for a lot of these jquery scripts and it has saved me. I definitely recommend it, even if you are only developing for IE.  The other thing I have done when testing/debugging, is to get it working manually the way you want outside of qcodo. the start adding it to qcodo and compare the output between what qcodo is sending to the browser vs, what you had coded manually.  maybe post the output of what is being sent to the browser.  off hand i don't see any glaring mistakes with the above code.   only thing i can think of without seeing more, is maybe your $strJavascriptArray isn't being set properly, which is where looking at the View Source in the browser can help us track down why it is not working.

-chris

#5  |  Christophe Damour (Saint Laurent des Combes) France
Friday, August 10, 2007, 2:17 AM PDT

Hi Chris,

Thank you for helping.

I finally got it working by adding minChars: 0 (default is minChars: 1).

I will also need mustmatch option. Do you know how this should be implemented ?

And last : I would like to have both autoFill and matchContains together... Have you got an idea for this (I am going to post a message on Jörn site).

Edit : I installed FireBug and find it great. Thanks for your advices ;-) they help !

Christophe

#6  |  zenoyu (Sydney) Australia
Thursday, August 16, 2007, 5:54 PM PDT

Thanks Christophe, I have fixed accordingly and added some more variables for setting up the script.

And it looks like the mustmatch option is actually broken (mentioned from his website)

       /**
        * Fill the textinput while still selecting a value, replacing the value if more is type or something else is selected. Default: false
        */
       protected $blnAutoFill=false;
       /**
        * If set to true, the autocompleter will only allow results that are presented by the backend. Note that illegal values result in an empty input box. Default: false
        */
       protected $blnMustMatch=false;
       /**
        * Whether or not the comparison looks inside (i.e. does “ba” match “foo bar”) the search results. Only important if you use caching. Don’t mix with autofill. Default: false
        */
       protected $blnMatchContains=false;
       /**
        * Whether or not the comparison is case sensitive. Only important only if you use caching. Default: false
        */
       protected $blnMatchCase=false;
       /**
        * The minimum number of characters a user has to type before the autocompleter activates. Default: 1
        */
       protected $intMinChars=0;

#7  |  fimbulvetr (Denver, CO)
Sunday, August 19, 2007, 6:23 PM PDT

Hi, I can't seem to get this to work.

I've download the zip file from

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

and unpacked the files to where you instructed in http://qcodo.com/downloads/item.php/132

Although it was not clear, I also moved jquery-1.1.2.pack.js to assets/js/jquery.js.

I setup a textbox, like so:

$this->txtCompanyName = new QAutoCompleteTextBox($this);
$this->txtCompanyName->Name = QApplication::Translate('Keyword');
$objListItem = new QListItem('test', 1);
$this->txtCompanyName->AddItem($objListItem);

A  script src=assets/js/jquery.js was not showing up in the source, so I added that and it still the same problem!

Unterminted string literal line 203, then the ajax error pops up and I get the infuriating popup and all it does is show me junk (not a real qcodo error).

The instructions do not explicitly say to cp the jquery-1.1.2.pack.js to assets/js/jquery.js, but qcodo was erroring when I didn't have it, saying it couldn't find it.

Thanks

#8  |  Francesco Abbattista (Stuttgart, BW, Germany) Italy Financial Contributor
Monday, September 3, 2007, 2:32 PM PDT

Hi zenoyu,

I've revised the jquery.autocomplete.js + jquery.autcomplete.js (with the qcodo part) and fixed all “;” and “{" “}” issues required to properly pack the .js file using Dean Edwards Packer, since I was receiving a couple of JS errors when using a packed version.

If you're interested, drop me a note and I'll send it to you so that you can take it into your next release...

@fimbulvetr:
You could configure the files to include in the QAutoCompleteTextBox.class to properly suit your needs.

...
protected $strJavaScripts     = 'jquery.js,jquery.autocomplete.js,dimensions.js,jquery.bgiframe.min.js';
...


cheers

#9  |  zenoyu (Sydney) Australia
Monday, September 3, 2007, 5:01 PM PDT

Thanks Francesco : )

#10  |  Francesco Abbattista (Stuttgart, BW, Germany) Italy Financial Contributor
Tuesday, September 4, 2007, 3:42 PM PDT

zenoyu, where can I send you and/or upload the .js files?

cheers



Copyright © 2005 - 2012, Quasidea Development, LLC
This open-source framework for PHP is released under the terms of The MIT License.