jQuery UI autocomplete with objects
The problem was Autocomplete couldn't render the source for its functioning.
You need to set the source of the autocomplete based on the JSON data present using ,
source: function (request, response) {
//data :: JSON list defined
response($.map(data, function (value, key) {
return {
label: value.first_name,
value: value.id
}
}));
},
And, I also removed the .data callback from the code.
See the working code here
Here is a working example that performs the autocomplete action:
source: function(request, response) {
if (!request || request.term.length < 2)
return;
var term = request.term.toLowerCase();
var r = $.grep(
myObjectArray,
function(v, i) {
return (v.Name.toLowerCase().indexOf(term) >= 0);
}).map(function(v, i) {
return {
label: v.Name,
value: v.Name,
data: v // in case you need the data from object array
}
});
response(r);
}
Working answer - with correct filtering. The filtering in the accepted answer wasn't working because nothing was being checked against request.term.
var mydata =
[{"id": 1, "name": "John", "age": 23},
{"id": 2, "name": "Mary", "age": 33},
{"id": 3, "name": "Richard", "age": 53},
{"id": 4, "name": "Ashley", "age": 25},
{"id": 5, "name": "Kyle", "age": 17},
{"id": 6, "name": "Samantha", "age": 29},
{"id": 7, "name": "David", "age": 43},
{"id": 8, "name": "Charles", "age": 27},
{"id": 9, "name": "Elaine", "age": 41},
{"id": 10, "name": "William", "age": 22}
];
$('#myautocomplete').autocomplete({
minLength: 2,
source: function (request, response) {
response($.map(mydata, function (obj, key) {
var name = obj.name.toUpperCase();
if (name.indexOf(request.term.toUpperCase()) != -1) {
return {
label: obj.name + " (" + obj.age + ")", // Label for Display
value: obj.id // Value
}
} else {
return null;
}
}));
},
focus: function(event, ui) {
event.preventDefault();
},
// Once a value in the drop down list is selected, do the following:
select: function(event, ui) {
event.preventDefault();
// place the person.given_name value into the textfield called 'select_origin'...
$('#myautocomplete').val(ui.item.label);
// ... any other tasks (like setting Hidden Fields) go here...
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
e.g. Try the string "ar" for filtering<br/>
<input id="myautocomplete" type="text" placeholder="type some key string..." />I have managed to make it work wonderfully in the following way:
$(document).on('ready',function(){
$(function() {
var arrLinks = [
{% for u in users %}
{
nombres: "{{ u.names }} {{u.sur_names}}",
email: "{{ u.username }}",
documento: {{ u.identificationNumber }},
telefono: {{ u.phone }},
label: '{{ u.names }} {{u.sur_names}} / {{ u.username }} * Doc: {{ u.identificationNumber }} - Cel: {{ u.phone }}'
},
{% endfor %}
];
$("input[name=search]").autocomplete({
source: arrLinks
}).data("autocomplete")._renderItem = function(ul, item) {
return $("<li>").data("item.autocomplete", item).append("<a>" + item.nombres + "</a>").appendTo(ul);
};
});
});
Note: I work with symfony, from the controller I am sending an object with users and in the view (twig) I make a FOR with which I assign the javascript object the data I need. It is important to define in the label all the parameters for which you want to search.
Demo image!
$(document).on('ready',function(){
$(function() {
var arrLinks = [
{
nombres: "Fernando León",
email: "[email protected]",
documento: 10695846754,
telefono: 3208123307,
label: 'Fernando León / [email protected] * Doc: 10695846754 - Cel: 3208123307'
},
{
nombres: "Edgar Molina",
email: "[email protected]",
documento: 736282826,
telefono: 30087654637,
label: 'Edgar Molina / [email protected] * Doc: 736282826 - Cel: 30087654637'
}
];
$("input[name=search]").autocomplete({
source: arrLinks
}).data("ui-autocomplete")._renderItem = function(ul, item) {
return $("<li>").data("ui-autocomplete-item", item).append("<a>" + item.nombres + "</a>").appendTo(ul);
};
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<input type="text" name="search">