Я использую автозаполнение JQuery для получения данных из базы данных в php. Я получаю правильный результат из базы данных по мере ввода ключевого слова. Но я хочу, чтобы идентификатор этих данных был отдельным (потому что я не хочу идентификатор в самой этикетке). Мой JQUERY CODE lokks выглядит следующим образом:
$( "#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:
$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);
Проблема заключается в том, как я могу поместить id в html, кроме самого ярлыка, когда пользователь выбирает конкретное предложение. Я хочу поместить id в этот контейнер HTML:
<input type='hidden' name='referrer_id' id='referrer_id' />
$( "#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 } });
$("#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; } });
<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>