文章阅读
JSer.autoComplete自动完成输入控件
文章类别: JSer功能扩展  更新日期: 2012-03-31 12:58:28.0  点击次数:4757
  JSer.autoComplete自动完成控件是JSer脚本框架的一个功能扩展,用于实现类似百度首页搜索输入框一样的效果。即当用户在输入框中输入一些字符时,网页自动将相关内容(即以用户输入的字符开头的字符串)以下拉菜单的形式弹出,供用户选择,以便快速输入或选择内容。此控件完全兼容IE、Firefox、Chrome、Opera、Safari等内核的浏览器。
先来看看效果(具体数据来原可由用户定义)。
 
示例1(静态数据来源): [查看源码]
请输入字符a,或b, 或c

示例2(静态数据来源、预处理数据、事件响应): [查看源码]
请输入字符a,或b, 或c
 
示例3(AJAX JSON动态数据来源): [查看源码]
请输入字符a,或b, 或c
 
使用方法:
1. 首先请点击链接下载JSer.autoComplete.js文件,并嵌入到您的网页。注意,此脚本依赖于JSer.js,请先确保在嵌入这个脚本之前,您已经嵌入了JSer.js,如果没有,请先从本站相关页面下载最新版本的JSer.js并嵌入到您的网页。
2. JSer.autoComplete控件的调用语法:JSer(selector).autoComplete(prmObj);
 
参数说明:
参数名称 类型 说明
selector selector 用于指定要设置自动完成的输入框的JSer selector选择符,例如:"#inputId",  ".inputclass" 等。
prmObj object 用于定义自动完成控件的相关特性,它是一个对象,此对象可选属性如下表。
 
prmObj对象可选属性:
属性名称 类型 说明
dataSource string array 当dataSource指定为一个字符串数组时,则用户在输入框输入字符时,程序会将数组中以输入字符开头的字符串列出到下拉菜单中供用户选择。
function 当dataSource指定一个函数时,此函数需返回一个字符串数组,或者返回一个JSer.url对象
1. 当函数返回一个字符串数组时,程序直接将数组的每个字符串元素列出到下拉菜单中供用户选择(您可以在函数中对返回数据作适当预处理)
2. 当函数返回一个JSer.url对象时,程序将用这个JSer.url对象进行AJAX异步数据请求(type='json')调用,并将AJAX返回的JSON对象(字符串数组)的每个下标元素列出到下拉菜单中供用户选择。
注意:在函数中您可以使用隐含的this关键字来获得对输入框的引用;对于function形式的dataSource,最终返回的字符串数组的每个下标元素将直接列出到下拉菜单中而不管该字符串是不是以用户输入的字符开头。
width int 整数值。用于指定下拉菜单框的宽度。默认值为0,值为0表示弹出框的宽度与输入框的宽度一样。
height int 整数值。用于指定下拉菜单框的高度。默认值为200,如果下拉菜单中显示的内容超出其高度,将显示纵向滚动条。
opacity 0-100 0-100之间的整数值。用于指定下拉菜单的显示不透明度(数字越小越透明),默认值为95。
showCss css CSS样式值,用于指定下拉菜单项的默认显示样式。下面这两种写法都是可以的:
示例1:showCss: "color:blue"
示例2:showCss: {color:'blue', 'border-bottom': '1px gray solid'}
overCss css CSS样式值,使用方法如同showCss,用于指定下拉菜单项被选中时的显示样式。
onChange function 指定当输入框的内容被改变量,需要执行的函数。此函数内部可以使用隐含的this关键字来获得对当前输入框的引用;如果要监听输入框内容的改变,您应该使用这个onChange来替代输入框的默认change事件。
以上proObj属性中,除dataSource必须指定外,其它属性均可以不指定。

最后,让我们来看看上面3个示例的相关源代码:
首先创建输入框:
3个示例的相关HTML代码如下:
1. <input type="text" id="example1"/><br />
2. <input type="text" id="example2"/><br /><div id="tipDIV" style="color:red"></div><br />
3. <input type="text" id="example3"/>
 
然后在JSer.exec()中创建autoComplete:
JSer.exec(function(){
     //示例1的代码:
    JSer("#example1").autoComplete({
            dataSource:['a1','a2','a3','a4','a5','a6','a7','a8','a9','a10',
                                   'b1','b2','b3','c1','c2','c3','a11111','aaaaa']
     });


    //示例2的代码:
    var arr = ['a1','a2','a3','a4','a5','a6','a7','a8','a9','a10',
                     'b1','b2','b3','c1','c2','c3','a11111','aaaaa'];
    JSer("#example2").autoComplete({
            dataSource:function(){
                var sa = [];
                for(var i=0;i<arr.length; i++)
                    if(arr[i].indexOf(this.value)==0) sa.push(arr[i]);//判断是不是以输入字符开头
                return sa;
            }
,
            onChange:function(){
                JSer("#tipDIV").html('输入框值被改成了:'+this.value);
            }

    });


    //示例3的代码:
    JSer("#example3").autoComplete({
            dataSource:function(){
                return JSer.url("queryJSON.do?key="+this.value);
               /* 注:queryJSON.do根据用户输入的字符串(即此处的key参数)
                * 从数据库查询并返回为JSON对象即可(它同样也是一个字符串数组),
                * 例如queryJSON.do响应结果:
                * ['a1','a2','a3','a111']
                **/
            }

    });

});
[ 上一篇 用JSer让表格的奇数行和偶数行显示不同的样式   下一篇 JSer.modalDialog模态窗口 ]
鄂ICP备18006629号-1       鄂公网安备 42050302000160号


技术支持QQ:39886616 QQ群:7759217
联系JDiy作者: ziquee java/javascript WEB编程
E-mail:ziquee@abcbcd.com http://189.cn
*尊姓大名:

*电子邮箱:

*QQ号码:

*留言内容:
提交留言
取消
loading...
注:带"*"的为必填项。请如实填写您的E-mail或QQ号码以便我们能与您取得联系。