JSer.autoComplete自动完成控件是JSer脚本框架的一个功能扩展，用于实现类似百度首页搜索输入框一样的效果。即当用户在输入框中输入一些字符时，网页自动将相关内容（即以用户输入的字符开头的字符串）以下拉菜单的形式弹出，供用户选择，以便快速输入或选择内容。此控件完全兼容IE、Firefox、Chrome、Opera、Safari等内核的浏览器。
先来看看效果（具体数据来原可由用户定义）。
示例1(静态数据来源)： [查看源码]
请输入字符a，或b, 或c
使用方法：
1. 首先请点击链接下载JSer.autoComplete.js文件，并嵌入到您的网页。注意，此脚本依赖于JSer.js，请先确保在嵌入这个脚本之前，您已经嵌入了JSer.js，如果没有，请先从本站相关页面下载最新版本的JSer.js并嵌入到您的网页。
2. JSer.autoComplete控件的调用语法：JSer(selector).autoComplete(prmObj);
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事件。 |
首先创建输入框：
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"/>
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',
//示例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',
});
//示例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);
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']
**/
}
});
});
}
});
});
鄂公网安备 42050302000160号
