Criar um exemplo igual ao do Google Suggest em Cold

Na NEt tem montes e montes de tutoriais ensinando a usar o CFSUGGEST, mas acho que o problema é comigo mesmo!

ehehehe ele n foi com a minha cara.

Saquem o tutorial:

CFAJAX Suggest

« H » email link

CFAJAX 1.2.1 adds a feature called "suggest," a type of autocomplete similar to the email address completion in Google's GMail. Based on the return from a CFAJAX driven CF function, values matching the initial entry into a textbox are shown, so the user can pick from a list rather than typing the whole thing.

 

(UPDATE: The steps below now include a very simple cf function to return a query to the JS, to ensure people know it really is quite straightforward).

To use the suggest feature, the following are necessary as a minimum:

1) Include the relevant CFAJAX JS scripts in the html (use your own paths as appropriate) e.g.

<script type='text/javascript' src='/cfajax.1.2.1/core/prototype.js'></script>

<script type='text/javascript' src='/cfajax.1.2.1/core/suggest.js'></script>

<script type='text/javascript' src='/cfajax.1.2.1/core/engine.js'></script>

<script type='text/javascript' src='/cfajax.1.2.1/core/util.js'></script>

<script type='text/javascript' src='/cfajax.1.2.1/core/settings.js'></script>

2) Create the suggest object before anything tries to use it (i.e. in the head of the page) and initialise a variable to pass as a search string:

<script language='javascript'>

 var mySuggestObject= new Suggest();

 var searchString = "";

</script>

3) Create a function to run at the body onload event to initialise the suggest object with the form field that is going to use it:

<script language='javascript'>

 

 

 

 function onInit()

 {

 onSuggestFieldFocus(mySuggestObject);

 mySuggestObject.InitQueryCode('mySuggestObject','formfieldname')

 }

</script>

 

 

 

4) Create a function called getData() that will do the CFAJAX call (the name of this fucntion is important as it's how the suggest object knows what to do) and a return handler

 

 

 

function getData(qry)

 {

 searchString = qry;

 DWREngine._execute(_cfscriptLocation, null, 'myCFFuction', searchString, getDataResult);

 }

 

function getDataResult(return)

 /*

 this function assumes a CF query object with columns USERNAME and DN is coming back from the database via the CF function

 as the username is typed, the full DN is displayed as the suggest option

 */

 { var key = Array();

 var value = Array();

 

 for (i=0; i < return.length; i++)

 {

 key* = return**.USERNAME; //if your query has a different column name, use it here*

value = return.DN; //if your query has a different column name, use it here

}

strQuery = selectedSuggestObject.name + '.showQueryDiv("' + searchString + '", key , value)';

eval (strQuery);

}

 

 

 

5) In the form, the form element needs to call the onSuggestFieldFocus() function e.g.:

 

<input id="formfieldname" name="formfieldname" value="" size=20 autocomplete="off" onFocus="onSuggestFieldFocus(mySuggestObject)">

 

6) Make sure the CF function in your functions.cfm file returns a query, for example:

 

*<cffunction name="myCFFuction" returntype="query" output="no">*

* <cfargument name="searchString" type="string" required="yes">*

* <cfset var QGetMatchingUsers="">*

* <cfquery name="QGetMatchingUsers" datasource="myDSN">*

* SELECT username,dn*

FROM users

* WHERE username LIKE <cfqueryparam cfslqtype="cf_sql_varchar" value="#ARGUMENTS.searchString#%">*

* </cfquery>*

* <cfreturn QGetMatchingUsers>*

*<cffunction>*

 

 

 

 

 

 

Será q algum de vocês conseguiu?

 

Pode dar uma força pro amigo aqui rs...

 

 

Valeu galera

!