autocomplete

Report · Mar 30, 2022

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>

</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

Report · Mar 30, 2022

I use the jQuery Select2 library and it's very easy to integrate. It offers a lot of extra features, including filtering.
https://select2.org/

Report · Apr 01, 2022

Hi @pham_mn ,

From what I can see, temp is a (JSON) strng. This implies that dynamicData will also be a string. However, staticData is an array.

It suggests to me that you should change dynamicData to an array, using something like:

<cfoutput>
  var #toScript(deserializeJson(temp), "dynamicData")#;
</cfoutput>

Report · Apr 07, 2022

Hi @pham_mn

Did that help?

Report · Apr 07, 2022

That's it.

Thak you SOO much

Report · Apr 07, 2022

My pleasure. Thanks for the update.

autocomplete

1 Correct answer