jQuery UI 自动完成对象
jQuery UI autocomplete with objects
我正在使用 jQuery 1.11.2 并尝试让自动完成小部件解析数据数组。我必须要在阵列中的人，Will Smith 和 Willem Dafoe。当我在文本字段中输入 Wi 时，我希望看到这两个名称都被添加到下拉列表中，但我没有得到任何回应。这是代码的副本：
<script src="js/jquery/jquery-1.11.2.js"></script>
<script src="js/jquery/jquery-ui.js"></script>
<link rel="stylesheet" href="js/jquery/jquery-ui.css"/>
<link rel="stylesheet" href="js/jquery/jquery-ui.theme.css"/>
<script type="text/javascript">
$(function() {
var data = [
{
"id": 1,
"first_name": "Will",
"last_name": "Smith",
"created_at": "2015-01-27T13:09:20.243Z",
"updated_at": "2015-01-27T13:09:20.243Z"
},
{
"id": 2,
"first_name": "Willem",
"last_name": "Dafoe",
"created_at": "2015-01-27T13:17:23.479Z",
"updated_at": "2015-01-27T13:17:23.479Z"
}
];
// Below is the name of the textfield that will be autocomplete
$('#search').autocomplete({
// This shows the min length of charcters that must be typed before the autocomplete looks for a match.
minLength: 2,
// This is the source of the auocomplete suggestions. In this case a list of names from the people controller, in JSON format.
source:data,
// This updates the textfield when you move the updown the suggestions list, with your keyboard. In our case it will reflect the same value that you see in the suggestions which is the person.given_name.
focus: function(event, ui) {
$('#search').val(ui.item.first_name);
return false;
},
// Once a value in the drop down list is selected, do the following:
select: function(event, ui) {
// place the person.given_name value into the textfield called 'select_origin'...
$('#search').val(ui.item.first_name);
// and place the person.id into the hidden textfield called 'link_origin_id'.
$('#link_origin_id').val(ui.item.id);
return false;
}
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" ).data( "ui-autocomplete-item", item ).append( "<a>" + item.first_name + "</a>" ).appendTo( ul );
// For now which just want to show the person.given_name in the list.
};
});
</script>
Search: <input type="text" id="search" />
代码全部在本地驱动器上的单个 html 文件夹中。此时不涉及任何服务器。此外，我已经检查了检查元素工具是否有错误，但显示 none 并且找到并加载了所有资源。
问题是 Autocomplete 无法呈现其功能的来源。
您需要使用 ,
根据存在的 JSON 数据设置自动完成的来源
source: function (request, response) {
//data :: JSON list defined
response($.map(data, function (value, key) {
return {
label: value.first_name,
value: value.id
}
}));
},
而且，我还从代码中删除了 .data 回调。
查看工作代码here
我已经设法通过以下方式让它完美地工作：
$(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);
};
});
});
注意：我使用 symfony，我从控制器向用户发送一个对象，在视图（树枝）中我创建了一个 FOR，我用它为 javascript 对象分配了我需要的数据。请务必在标签中定义您要搜索的所有参数。
Demo image!
$(document).on('ready',function(){
$(function() {
var arrLinks = [
{
nombres: "Fernando León",
email: "efleon9@gmail.com",
documento: 10695846754,
telefono: 3208123307,
label: 'Fernando León / efleon9@gmail.com * Doc: 10695846754 - Cel: 3208123307'
},
{
nombres: "Edgar Molina",
email: "fleon@fitpal.co",
documento: 736282826,
telefono: 30087654637,
label: 'Edgar Molina / fleon@fitpal.co * 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">
工作答案 - 具有正确的过滤。 已接受答案中的过滤不起作用，因为未根据 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..." />
这是一个执行自动完成操作的工作示例：
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);
}
我正在使用 jQuery 1.11.2 并尝试让自动完成小部件解析数据数组。我必须要在阵列中的人，Will Smith 和 Willem Dafoe。当我在文本字段中输入 Wi 时，我希望看到这两个名称都被添加到下拉列表中，但我没有得到任何回应。这是代码的副本：
<script src="js/jquery/jquery-1.11.2.js"></script>
<script src="js/jquery/jquery-ui.js"></script>
<link rel="stylesheet" href="js/jquery/jquery-ui.css"/>
<link rel="stylesheet" href="js/jquery/jquery-ui.theme.css"/>
<script type="text/javascript">
$(function() {
var data = [
{
"id": 1,
"first_name": "Will",
"last_name": "Smith",
"created_at": "2015-01-27T13:09:20.243Z",
"updated_at": "2015-01-27T13:09:20.243Z"
},
{
"id": 2,
"first_name": "Willem",
"last_name": "Dafoe",
"created_at": "2015-01-27T13:17:23.479Z",
"updated_at": "2015-01-27T13:17:23.479Z"
}
];
// Below is the name of the textfield that will be autocomplete
$('#search').autocomplete({
// This shows the min length of charcters that must be typed before the autocomplete looks for a match.
minLength: 2,
// This is the source of the auocomplete suggestions. In this case a list of names from the people controller, in JSON format.
source:data,
// This updates the textfield when you move the updown the suggestions list, with your keyboard. In our case it will reflect the same value that you see in the suggestions which is the person.given_name.
focus: function(event, ui) {
$('#search').val(ui.item.first_name);
return false;
},
// Once a value in the drop down list is selected, do the following:
select: function(event, ui) {
// place the person.given_name value into the textfield called 'select_origin'...
$('#search').val(ui.item.first_name);
// and place the person.id into the hidden textfield called 'link_origin_id'.
$('#link_origin_id').val(ui.item.id);
return false;
}
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" ).data( "ui-autocomplete-item", item ).append( "<a>" + item.first_name + "</a>" ).appendTo( ul );
// For now which just want to show the person.given_name in the list.
};
});
</script>
Search: <input type="text" id="search" />
代码全部在本地驱动器上的单个 html 文件夹中。此时不涉及任何服务器。此外，我已经检查了检查元素工具是否有错误，但显示 none 并且找到并加载了所有资源。
问题是 Autocomplete 无法呈现其功能的来源。
您需要使用 ,
根据存在的 JSON 数据设置自动完成的来源source: function (request, response) {
//data :: JSON list defined
response($.map(data, function (value, key) {
return {
label: value.first_name,
value: value.id
}
}));
},
而且，我还从代码中删除了 .data 回调。
查看工作代码here
我已经设法通过以下方式让它完美地工作：
$(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);
};
});
});
注意：我使用 symfony，我从控制器向用户发送一个对象，在视图（树枝）中我创建了一个 FOR，我用它为 javascript 对象分配了我需要的数据。请务必在标签中定义您要搜索的所有参数。
Demo image!
$(document).on('ready',function(){
$(function() {
var arrLinks = [
{
nombres: "Fernando León",
email: "efleon9@gmail.com",
documento: 10695846754,
telefono: 3208123307,
label: 'Fernando León / efleon9@gmail.com * Doc: 10695846754 - Cel: 3208123307'
},
{
nombres: "Edgar Molina",
email: "fleon@fitpal.co",
documento: 736282826,
telefono: 30087654637,
label: 'Edgar Molina / fleon@fitpal.co * 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">
工作答案 - 具有正确的过滤。 已接受答案中的过滤不起作用，因为未根据 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..." />
这是一个执行自动完成操作的工作示例：
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);
}