jQuery自动完成多个输出
我正在使用jQuery AutoComplete根据输入的值从DataBase获取结果。 然后，用户将单击搜索按钮以告知页面搜索特定条目详细信息。
我想得到2个值， 名称和标题 。 我只想向用户显示名称 ，而页面使用标题作为搜索条件。
例如：当一个人键入Vehicle时 ，结果将在列表中显示Vehicle1, Vehicle2 。
当用户点击Vehicle1 ，隐藏的框将出现Title ，这将是Bike ，例如Vehicle2 ，它将发出Car的隐藏框。
我可以正确地在文本框中显示名称 ，但我不能为我的生活（并在搜索2天后）将标题绑定到隐藏的框。
JavaScript的：
$(document).ready(function () { $(".tb").autocomplete({ source: function (request, response) { $.ajax({ url: "AutoComplete.asmx/FetchEmailList", data: "{ 'prefix': '" + request.term + "' }", dataType: "json", type: "POST", contentType: "application/json; charset=utf-8", dataFilter: function (data) { return data; }, success: function (data) { response($.map(data.d, function (item) { return { //value: item.Title, label: item.Name }; })); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus); } }); }, minLength: 2 }); });
ASPX代码：
代码隐藏：
[WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [ScriptService] public class AutoComplete : System.Web.Services.WebService { [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public List FetchEmailList(string prefix) { var emp = new Employee(); var fetchEmail = emp.GetEmployeeList(prefix) .Where(m => m.Name.ToLower().StartsWith(prefix.ToLower())); return fetchEmail.ToList(); } }
完成类:(请原谅）
public class Employee { public string Title { get; set; } public string Name { get; set; } public string value { get; set; } public List GetEmployeeList(string prefixText) { List cmpList = new List(); SqlConnection db = DataConn.SqlConnection(); db.Open(); SqlTransaction transaction = db.BeginTransaction(); //var array = new ArrayList(); try { SqlCommand command = new SqlCommand("Select [something] FROM vwGetDetails WHERE [something_else] LIKE N'%" + prefixText + "%' ORDER BY [thatOther_thing] ASC", db, transaction); using (SqlDataReader reader = command.ExecuteReader()) { while (reader.Read()) { cmpList.Add(new Employee() { Name = reader["Value1"].ToString(), Title = "Value1_Cat", value = "Value1_Cat"}); } } command = new SqlCommand("Select [something] FROM [somewhere] WHERE [thingy] LIKE N'%" + prefixText + "%' ORDER BY [previousThingy] ASC", db, transaction); using (SqlDataReader reader = command.ExecuteReader()) { while (reader.Read()) { cmpList.Add(new Employee() { Name = reader["Value2"].ToString(), Title = "Value2_Cat", value = "Value2_Cat"}); } } transaction.Commit(); } catch (SqlException) { transaction.Rollback(); cmpList.Add(new Employee() { Name = "Problem Getting Results.", value = "Error"}); //array.Add("Problem Getting Results."); } if (cmpList.Count == 0) cmpList.Add(new Employee() { Name = "Nothing to Display.", value = "Info"}); //array.Add("Nothing to Display."); //return array; return cmpList; } }
对JavaScript的这些修改应该可以解决问题：
这里的假设是选择器完全返回我们正在处理的元素，如果不是，则需要调整它们。
凉。 我一直在谷歌搜索这个解决方案好几天…优秀干净的代码！ 只是一个小小的评论：使用jqueryUI 1.10，这会引发javascriptexception。 .data('autocomplete')._renderItem = function(ul, item) {...我用过.data('ui-autocomplete')._renderItem = function(ul, item) {...一切都很.data('ui-autocomplete')._renderItem = function(ul, item) {... 。