Jquery autocomeplete plugin not working with numeric values?
I have a requirement to show stock offers in a search box. So I tried using the jQuery autocomplete plugin. I am making an ajax call to a function inside my cfc that returns all the stock numbers in an array.
But the problem is the search box is not showing suggestions correctly. I think this issue is related to numeric values. Has anyone encountered a problem? Here's a line:
$(function() {
var availableTags = [
1234,
1456,
1789,
1988,
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
The same works great with string data. How do I fix it?
source to share
As you can read in the autocomplete jQueryUI docs
There are two supported array formats
Array: An array can be used for local data. There are two supported formats:
- Array of strings: ["Choice1", "Choice2"]
- Array of objects with label and value properties: [{label: "Choice1", value: "value1"}, ...]
Try the following code.
$(function() {
var availableTags = [
"1234",
"1456",
"1789",
"1988",
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
source to share
Since the autocomplete widget expects an array of strings as a source, you can convert your data to an array of strings when creating the widget:
$(function() {
var availableTags = [
1234,
1456,
1789,
1988,
];
$( "#tags" ).autocomplete({
source: availableTags.map(function(a){
return a.toString()
})
});
});
source to share