//条码录入，自动完成功能 function addAutoComplete() { $('#txt_spuNo').autocomplete({ autoFocus: true, source: function (request, response) { $.ajax({ url: "../HandlerBase.ashx?action=TipBarcode", data: { spu: request.term }, success: function (data) { response($.parseJSON(data)); } }); }, minLength: 3
});
}
自定义格式：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <link href="../Content/themes/base/all.css" rel="stylesheet" /> <script src="../Scripts/jquery-1.6.4.min.js"></script> <script src="../Scripts/jquery-ui-1.11.4.min.js"></script> <script type="text/javascript"> $(function () { addAutoComplete(); }); function addAutoComplete() { $('#txt_Sku').autocomplete({ autoFocus: true, source: function (request, response) { $.ajax({ url: "http://localhost/jqueryuiapp.service/api/flowcard/getlist", data: { sku: request.term }, dataType: "json", success: function (data) { response(data); } }); }, minLength: 3, select: function (event, ui) { if (ui.item != null) { $('#txt_Sku').val(ui.item.SKU); $('#txt_BatchNo').val(ui.item.BatchNo); $('#txt_GroupNo').val(ui.item.GroupNo); } return false; } , focus: function (event, ui) { $('#txt_Sku').val(ui.item.SKU); return false; } }).autocomplete("instance")._renderItem = function (ul, item) { return $('<table></table>') .data("item.autocomplete", item) .append('<tr><td style="140px;">' + item.SKU + '</td><td style="50px;"> ' + item.BatchNo + '</td><td style="60px;"> ' + item.GroupNo + "</td></tr>") .appendTo(ul); }; }; </script> </head> <body> SKU：<input id="txt_Sku" width="200" /><br /> 批次：<input id="txt_BatchNo" width="200" /><br /> 版号：<input id="txt_GroupNo" width="200" /> </body> </html>
后台：
using System.Runtime.Serialization; namespace JQueryUIApp.Model { [DataContract] public class FlowcardModel { [DataMember] public string SKU { get; set; } [DataMember] public string BatchNo { get; set; } [DataMember] public string GroupNo { get; set; } } }
using System.Collections.Generic; using System.Web.Http; using JQueryUIApp.Model; namespace JQueryUIApp.Service.Controllers { public class FlowCardController : ApiController { public List<FlowcardModel> GetList() { var list = new List<FlowcardModel>(); list.Add(new FlowcardModel() { SKU = "12300000", BatchNo = "P01", GroupNo = "1" }); list.Add(new FlowcardModel() { SKU = "12340000", BatchNo = "P01", GroupNo = "1" }); list.Add(new FlowcardModel() { SKU = "12345000", BatchNo = "P01", GroupNo = "1" }); return list; } } }