javascript jquery自动完成获取ID作为选定的标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23683051/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery autocomplete get id as selected label
提问by user3609998
I am using JQuery autocomplete to get data from database in php. I am getting correct result from database as I type keyword. But, I want id of that data separate (because I don't want id in the label itself). My JQUERY CODE lokks like this:
我正在使用 JQuery 自动完成从 php 数据库中获取数据。当我输入关键字时，我从数据库中得到了正确的结果。但是，我希望将这些数据的 id 分开（因为我不想在标签本身中使用 id）。我的 JQUERY 代码看起来像这样：
$( "#referrer" ).autocomplete({
source: function(request, response) {
$.ajax({
url: "/ajax/ir_populate_referrer",
dataType: "json",
type: "POST",
data: {
keyword: request.term
},
success: function(data){
response( $.map( data, function( item ) {
//alert(item.label);
return {
label: item.label
}
}));
}
})
}
});
PHP Backend:
PHP后端：
$searchArray = array();
while($search = $result->fetch()){
$link = '';
$link .= $search['id'].', '.$search['cus_firstname'].' '.$search['cus_lastname'].', '.$search['cus_email'].', '.$search['cus_phone1'];
array_push($searchArray, array('label'=> $link, 'value' => $keyword, 'id'=>$search['id']));
}
echo json_encode($searchArray);
The problem is how can I put id in html other than label itself, when user selects particular suggestion. I want to put id in this HTML container:
问题是当用户选择特定建议时，如何将 id 放入 html 而不是标签本身。我想把 id 放在这个 HTML 容器中：
<input type='hidden' name='referrer_id' id='referrer_id' />
回答by Manishankar
$( "#referrer" ).autocomplete({
source: function(request, response) {
$.ajax({
url: "/ajax/ir_populate_referrer",
dataType: "json",
type: "POST",
data: {
keyword: request.term
},
success: function(data){
response( $.map( data, function( item ) {
//alert(item.label);
return {
label: item.label,
value: item.value // EDIT
}
}));
}
})
}
select: function(event, ui) {
$("#referrer_id").val(ui.item.value); // ui.item.value contains the id of the selected label
}
});
回答by Alexander Ceballos
$("#zipsearch").autocomplete({
source: function(req,res) {
$.ajax({
url: "json.php",
dataType: "json",
type: "GET",
data: {
term: req.term
},
success: function(data) {
res($.map(data, function(item) {
return {
label: item.label,
value: item.value,
id: item.id
};
}));
},
error: function(xhr) {
alert(xhr.status + ' : ' + xhr.statusText);
}
});
},
focus: function( event, ui ) {
$( "#zipsearch" ).val( ui.item.label );
return false;
},
select: function(event, ui) {
alert(ui.item.id);
$( "#zipsearch" ).val( ui.item.label );
return false;
}
});
回答by Hemant Soni
<head runat="server">
<title></title>
<link href="Styles/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.js" type="text/javascript"></script>
<style>
body
{
font-size: 70%;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#<%=TextBox1.ClientID %>").autocomplete({
source: function (request, response) {
$.ajax({
url: "AutoComplete.asmx/AutoCompleteAjaxRequest",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: "{ 'prefixText' : '" + $("#<%=TextBox1.ClientID %>").val() + "'}",
success: function (data) {
response($.map($.parseJSON(data.d), function (item) {
return {
label: item.UserNameToShow,
value: item.UserName,
id: item.UserId
}
}))
}
});
},
select: function (event, ui) {
$("#referrer_id").val(ui.item.id); // ui.item.value contains the id of the selected label
}
});
});
</script>
