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>