Atitit.auto complete 自动完成控件的实现总结

Atitit.auto complete  自动完成控件的实现总结

 

1. 框架选型 1

2. 自动完成控件的ioc设置 1

3. Liger  自动完成控件问题 1

4. 官网上的code有问题,不能显示控件渲染,,查看源码  <input type="text" id="txt2" οnchange="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" οnchange="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" οnchange="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>