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="" size="3" style="display:none"/>

<!-- mtr query control end-->

5. -------------------autoKmpltSpt----------

<link href="../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css">

<style type="text/css"></style>

<script src="../lib/ligerUI/js/core/base.js" type="text/javascript"></script>

<script src="../lib/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>

<script src="../lib/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>

<script src="../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>