jquery ui autocomplete
2024-10-20 16:46:06
//条码录入,自动完成功能
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="width:140px;">' + item.SKU + '</td><td style="width:50px;"> ' + item.BatchNo + '</td><td style="width: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 = "", BatchNo = "P01", GroupNo = "" });
list.Add(new FlowcardModel() { SKU = "", BatchNo = "P01", GroupNo = "" });
list.Add(new FlowcardModel() { SKU = "", BatchNo = "P01", GroupNo = "" });
return list;
}
}
}
最新文章
- jQuery源码学习感想
- Xamarin迁移到 Unified API 注意事项
- android 电容屏(一):电容屏基本原理篇
- How to Run Node.js with Express on Mobile Devices
- cocos2d-x学习之类型转换(转)
- Spark Streaming Backpressure分析
- 无奈而又苦逼的二分版本号回退法定位新引入的bug!!!
- C语言程序的三种基本结构
- oralce set
- 搭建vue开发环境及各种报错处理
- 布衣之路(一):VMware虚拟机+CentOS系统安装
- 【XSY3139】预言家 数位DP NFA
- django学习:整体思路与方向
- python进程间通信
- 在Salesforce中使用静态资源
- 【BZOJ4946】[NOI2017]蔬菜(贪心)
- linux dns 工具包 -- bind-utils
- sqlite基本操作
- KbmMW 4.50.00 测试版发布
- [leetcode-897-Increasing Order Search Tree]