autocomplete
Here is my code to do jQuery Autocomplete
<!DOCTYPE html>
<html>
<head>
<link href="../assets/styles.min.css" rel="stylesheet">
<title>jQuery UI Autocomplete: Using Label-Value Pairs</title>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/start/jquery-ui.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<!---<cfajaxproxy cfc="test" jsclassname="testCFC">--->
<cfset stateQuery=queryNew("abbreviation,label","varchar, varchar")>
<cfset QueryAddRow(stateQuery, 5)>
<cfset QuerySetCell(stateQuery, "label", "Alabama", 1)>
<cfset QuerySetCell(stateQuery, "abbreviation", "AL", 1)>
<cfset QuerySetCell(stateQuery, "label", "Minnesota", 2)>
<cfset QuerySetCell(stateQuery, "abbreviation", "MN", 2)>
<cfset QuerySetCell(stateQuery, "label", "Florida", 3)>
<cfset QuerySetCell(stateQuery, "abbreviation", "FL", 3)>
<cfset QuerySetCell(stateQuery, "label", "California", 4)>
<cfset QuerySetCell(stateQuery, "abbreviation", "CA", 4)>
<cfset QuerySetCell(stateQuery, "label", "New York", 5)>
<cfset QuerySetCell(stateQuery, "abbreviation", "NY", 5)>
<cfset temp = serializeJSON(stateQuery, "struct")>
</script>
<input id="autocomplete2" type="text" placeholder="U.S. state name">
<input id="autocomplete2-value" type="text" name="code"></p>
<script>
<cfoutput>
var #toScript(temp, "dynamicData")#
</cfoutput>
/*
* jQuery UI Autocomplete: Using Label-Value Pairs
* https://salman-w.blogspot.com/2013/12/jquery-ui-autocomplete-examples.html
*/
try
{
var staticData = [
{"abbreviation": "AL", "label": "Alabama"},
{"abbreviation": "MN", "label": "Minnesota"},
{"abbreviation": "FL", "label": "Florida"}
];
$(function() {
//var cfc = new testCFC();
//cfc.setHTTPMethod("GET");
//var dynamicData = cfc.fData();
//alert(dynamicData)
$("#autocomplete2").autocomplete({
source: staticData,
focus: function(event, ui) {
// prevent autocomplete from updating the textbox
event.preventDefault();
// manually update the textbox
$(this).val(ui.item.label);
},
select: function(event, ui) {
// prevent autocomplete from updating the textbox
event.preventDefault();
// manually update the textbox and hidden field
$(this).val(ui.item.label);
$("#autocomplete2-value").val(ui.item.abbreviation);
}
});
});
}
catch(e)
{
alert(e.message)
}
</script>
</body>
</html>
It works when source: staticData, but it is not work source: dynamicData.
With source: staticData.: When I type "F" in box 1, there is dropdown list that contains any "F" But
When I place this : source: dynamicData, then when I type "F" in the first box, there is no dropdown list
Any thoughts please?
Thank you
AdChoices