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>