Here's a quick example:
http://www.co-opcookbook.com/test.cfm
It's not working 100% right now, I think due to the way mySQL stores the
data (extra carriage returns at the end maybe). But here's the code for it
(note, this uses an older version of jQuery). I haven't take the time to
update this example page.
Here's TEST.cfm
<html>
<head>
<title> the recipe MANAGER</title>
<script language="javascript" src="includes/jquery.js"
type="text/javascript"></script>
<script language="javascript" src="includes/autocomplete.js"
type="text/javascript"></script>
<link href="includes/styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
/* set the page background color and margins. */
body { margin: 20px; }
-->
</style>
<script type="text/javascript">
function selectItem(li) {
if (li.extra) {
$('#fk_ing_id').val(li.extra);
}
}
function formatItem(row) {
return row[0];
}
$(document).ready(function() {
var curID = 0;
$("#ingredient").autocomplete("search.cfm", { minChars:1, matchSubset:1,
matchContains:1, cacheLength:10, onItemSelect:selectItem,
formatItem:formatItem, selectOnly:1 });
$('#saveandadd').click( function() {
curID++;
// get value from quanty drop downs
var whole = $('#wQty').val();
var fraction = $('#fQty').val();
var qty = parseInt(whole) + (fraction*1);
var unitID = $('#unit').val();
var unitText = $('#unit option:selected').text();
alert(unitText);
var ing = $('#ingredient').val();
// duplicate the template row
$('#template').clone().id(curID).appendTo('#ingHeader').removeClass('hideMe'
);
// set the values
$('#' + curID).html(qty + ' ' + unitText + ' ' + ing)
})
});
</script>
</head>
<body>
<br><br>
<cfquery name="getUnit" dataSource="#Application.DSN#"
username="#APPLICATION.user#" password="#Application.pass#">
SELECT *
FROM r_unit
ORDER BY recunit_name
</cfquery>
<cfquery name="getFraction" dataSource="#Application.DSN#"
username="#APPLICATION.user#" password="#Application.pass#">
SELECT *
FROM r_fractions
WHERE numerator != 0
ORDER BY value
</cfquery>
<cfoutput>
<fieldset id="entry">
<legend>Ingredient Entry</legend>
<select id="wQty" class="addIng">
<option value="0">--</option>
<cfloop index="q" from="1" to="50">
<option value="#q#">#q#</option>
</cfloop>
</select>
(and
<select id="fQty" class="addIng">
<option value="0">--</option>
<cfloop query="getFraction">
<option value="#value#">#numerator#/#denominator#</option>
</cfloop>
</select>
)
<select id="unit" class="addIng">
<cfloop query="getUnit">
<option value="#recunit_id#">#recunit_name#</option>
</cfloop>
</select>
<input type="text" id="ingredient" class="addIng">
<input type="hidden" id="fk_ing_id" value="">
<input type="button" id="saveandadd" value="Save & Add Another">
</fieldset>
</cfoutput>
<div id="ingHeader"><b>Ingredient Data</b></div>
<div id="template" class="hideMe ingData"></div>
</body>
</html>
And here's search.cfm
<cfquery name="get" dataSource="#Application.DSN#"
username="#APPLICATION.user#" password="#Application.pass#">
SELECT *
FROM r_ingredients
WHERE rec_list_ingredient LIKE <cfqueryparam value="%#Trim(URL.q)#%"
cfsqltype="CF_SQL_VARCHAR">
</cfquery>
<cfoutput query="get">#rec_list_ingredient#|#rec_list_id#
</cfoutput>
-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Priest, James (NIH/NIEHS) [C]
Sent: Monday, February 26, 2007 8:32 AM
To: jQuery Discussion.
Subject: [jQuery] jQuery + ColdFusion - auto complete examples?
I'm working on an administration tool and I'd like to use jQuery to populate
a user field - IE the user would type in a few letters of the last name and
have it find the matching names...
I know there are lots of ColdFusion folks on the list - I'm looking for some
examples :)
I've used jQuery quite a bit in the rest of this application but it's all
been for display/UI - no Ajax - so now I want to give that a try.
Thanks!
Jim
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
