首页 > 代码库 > Atitit.auto complete 自动完成控件的实现总结
Atitit.auto complete 自动完成控件的实现总结
Atitit.auto complete 自动完成控件的实现总结
1. 框架选型 1
2. 自动完成控件的ioc设置 1
3. Liger 自动完成控件问题 1
4. 官网上的code有问题,不能显示控件渲染,,查看源码 <input type="text" id="txt2" onchange="changeEventO9()"/>这个简化版本的走ok兰... 1
5. Liger 自动完成控件的调用 2
6. -------------------autoKmpltSpt---------- 2
1. 框架选型
Easyui 马,,,jqeueryui 好像有了,三,走十不的上K,好像gfw兰...
..子好..Ligerui..liger的文档有点儿烂,也不是弄全...
2. 自动完成控件的ioc设置
autoKmpltUrl="../common/ajaxSvs.jsp?meth=mtr4autoKmplt";
AKVfld="materialId";
AKTfld="materialDescription"
3. Liger 自动完成控件问题
官网上的code有问题,不能显示控件渲染,,查看源码 <input type="text" id="txt2" onchange="changeEventO9()"/>这个简化版本的走ok兰...
子能url,不能dwr执行在不个data分配给ac控件...
Id文本框子能使用默认的...林吧只好添加个textChange事件copy过去...
作者:: 老哇的爪子 Attilax 艾龙， EMAIL:1466519819@qq.com
转载请注明来源： http://blog.csdn.net/attilax
4. Liger 自动完成控件的调用
<!-- mtr query control start-->
<script>
autoKmpltUrl="../common/ajaxSvs.jsp?meth=mtr4autoKmplt";
AKVfld="materialId";
AKTfld="materialDescription"
</script>
<%@include file="../playcount/autoKmpltSpt.html" %>
<!-- def data fmt
[{"id":0,"name":"a0cname","desc":"0desc"}
-->
<input type="text" id="txt2" onchange="changeEventO9()"/>
<script>
function changeEventO9( )
{
$("#materialId").val($("#txt2_val").val());
}
</script>
<!--///-->
<input name="materialId" type="text" id="materialId" value=http://www.mamicode.com/"" size="3" style="display:none"/>
<!-- mtr query control end-->
5. -------------------autoKmpltSpt----------
<link href=http://www.mamicode.com/"../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css">
<style type="text/css"></style>
<script src=http://www.mamicode.com/"../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
<script src=http://www.mamicode.com/"../lib/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>
<script src=http://www.mamicode.com/"../lib/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
<script src=http://www.mamicode.com/"../lib/ligerUI/js/plugins/ligerComboBox.js" type="text/javascript"></script>
<script type="text/javascript" defer="defer">
$(function ()
{
var columns = [
{ header: ‘ID‘, name: ‘id‘, width: 80 },
{ header: ‘名字‘, name: ‘name‘, width: 170 },
{ header: ‘描述‘, name: ‘desc‘, width: 170 }
];
/* $("#txt1").ligerComboBox(
{
url: ‘../../data/net/ComboBoxData.ashx‘,
valueField : ‘id‘,
textField: ‘name‘,
columns: columns,
selectBoxWidth: 400,
autocomplete: true,
width: 400
}
);*/
// alert(autoKmpltUrl);
$("#txt2").ligerComboBox(
{
url: autoKmpltUrl,
valueField: AKVfld,
textField: AKTfld,
selectBoxWidth: 200,
autocomplete: true,
width: 200
}
);
// $("#txt3").ligerComboBox(
// {
// url: ‘../../data/net/ComboBoxData.ashx‘,
// valueField: ‘id‘,
// textField: ‘name‘,
// selectBoxWidth: 200,
// autocomplete: true,
// width: 200,
// renderItem: function (e)
// {
// var data = e.data, key = e.key;
// var out = [];
// out.push(‘<div>‘ + this._highLight(data.name, key) + ‘</div>‘);
// out.push(‘<div class="desc">备注:‘ + data.desc + ‘</div>‘);
// return out.join(‘‘);
// }
// }
// );
});
</script>
<style type="text/css">
.desc {
background: #fafafa;
color: ActiveCaption;
border-bottom: 1px solid #d3d3d3;
margin-top: 3px;
margin-bottom: 3px;
}
.l-over .desc, .l-selected .desc {
background: none;
}
</style>
Atitit.auto complete 自动完成控件的实现总结