Jquery Auto completion - How do I get ID of the selected value ? I need id of the selected item to process further
Question
I need id of the selected item to display details. I have put alert in the selection event to see what is there inside label and value but both label and value contains same text instead of id.
So Is there any way to get id of the selected item ?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery Demo</title>`enter code here`
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id$=txtAuto]").autocomplete({
source: function (request, response) {
$.ajax({
url: "Contact.aspx/GetNameList",
data: "{ 'label': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
var Details = [];
for (i = 0; i < data.d.length; i++) {
Details[i] = data.d[i].label;
}
$.each(Details, function (index, val) {
console.log(val.value);
});
response(Details);
},
error: function (result) {
}
});
}
, select: function (event, ui) {
alert(ui.item.value + ' - ' + ui.item.label);
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<div class="ui-widget">
<label for="txtAuto">Enter Name: </label>
<asp:TextBox ID="txtAuto" runat="server"> </asp:TextBox>
<asp:TextBox ID="TextBox1" runat="server">
</asp:TextBox>
</div>
<div id="Result">Click here for the time.</div>
</div>
</form>
</body>
</html>
C# Page where I am calling webmethod for the data.It just returns list of type UsernameList with value and label property
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Web.Script.Services;
public partial class Contact : Page
{
[WebMethod]
public static string GetDate()
{
return DateTime.Now.ToString();
}
[WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = false)]
public static List<UserNameList> GetNameList(string label)
{
var emp = new UserNameList();
var fetchName = emp.GetEmpList()
.Where(m => m.label.ToLower().StartsWith(label.ToLower()));
return fetchName.ToList();
}
}
UserNameList.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
/// <summary>
/// Summary description for UserNameList
/// </summary>
public class UserNameList
{
public int value { get; set; }
public string label { get; set; }
[WebMethod]
public List<UserNameList> GetNameList(string label)
{
UserNameList emp = new UserNameList();
var fetchName = emp.GetEmpList()
.Where(m => m.label.ToLower().StartsWith(label.ToLower()));
return fetchName.ToList();
}
public List<UserNameList> GetEmpList()
{
List<UserNameList> emp = new List<UserNameList>();
emp.Add(new UserNameList() { value = 1, label = "Arjun" });
emp.Add(new UserNameList() { value = 2, label = "Aaryan" });
emp.Add(new UserNameList() { value = 3, label = "Anoop" });
emp.Add(new UserNameList() { value = 4, label = "Bob" });
emp.Add(new UserNameList() { value = 5, label = "Boby" });
emp.Add(new UserNameList() { value = 6, label = "Cristen" });
emp.Add(new UserNameList() { value = 7, label = "Cris" });
return emp;
}
}
1 answers
solution1
0 2014-03-02 04:35:53
Its been awhile but i think whats wrong is you receiving the data from your action but only processing and keeping the label data, try the following change to see how you go.
You need to change the success section of you data processing to be:
source: function( request, response ) {
$.ajax({
url: "Contact.aspx/GetNameList",
data: "{ 'label': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
},
success: function( data ) {
response( $.map( data, function( item ) {
return {
label: item.label,
value: item.value
}
}));
}
});
},
select: function( event, ui ) {
alert( ui.item ?
"Selected: " + ui.item.label + " (" + ui.item.label + ")" :
"Nothing selected, input was " + this.value);
}
I haven't tested the above, just typed it here so maybe typos and just gone from autocomplete api, there are good examples around. Also use the $.map instead of $.each as that way you get an new array not the original.
Anyway hope this helps. Cheers
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.