Help
QUOTE
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[i] = return[i].USERNAME; //if your query has a different column name, use it here
value[i] = return[i].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>
« 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[i] = return[i].USERNAME; //if your query has a different column name, use it here
value[i] = return[i].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>
Página com os arquivos:
http://www.indiankey.com/cfajax/project.asp
Exemplo ao vivo!
http://www.indiankey.com/cfajax/examples/suggest.htm
Alguem consegui fazer ??????????
Abraços !
