在网页应用中,当你在输入组件里面输入的时候,很想让页面自动带出一些要输入的值,这就是自动完成功能.
应用一
比如我要在一个TextBox输入框里输入Red,当我输入R的时候,Red自动带出来.
代码分两部分,一部分是客户端的JAVASCRIPT的处理程式
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
/* ***********TextBox自動完成功能*********** */
var isOpera = navigator.userAgent.indexOf( " Opera " ) > - 1 ;
var isIE = navigator.userAgent.indexOf( " MSIE " ) > 1 && ! isOpera;
var isMoz = navigator.userAgent.indexOf( " Mozilla/5. " ) == 0 && ! isOpera;
function textboxSelect (oTextbox, iStart, iEnd)
{
switch (arguments.length)
{
case 1 :
oTextbox.select();
break ;
case 2 :
iEnd = oTextbox.value.length;
case 3 :
if (isIE)
{
var oRange = oTextbox.createTextRange();
oRange.moveStart( " character " , iStart);
oRange.moveEnd( " character " , - oTextbox.value.length + iEnd);
oRange.select();
}
else if (isMoz)
{
oTextbox.setSelectionRange(iStart, iEnd);
}
}
oTextbox.focus();
}
function autocompleteMatch (sText, arrValues)
{
for ( var i = 0 ; i < arrValues.length; i ++ )
{
if (arrValues[i].indexOf(sText) == 0 )
{
return arrValues[i];
}
}
return null ;
}
function autocomplete(oTextbox, oEvent, arrValues)
{
switch (oEvent.keyCode)
{
case 38 : // up arrow
case 40 : // down arrow
case 37 : // left arrow
case 39 : // right arrow
case 33 : // page up
case 34 : // page down
case 36 : // home
case 35 : // end
case 13 : // enter
case 9 : // tab
case 27 : // esc
case 16 : // shift
case 17 : // ctrl
case 18 : // alt
case 20 : // caps lock
case 8 : // backspace
case 46 : // delete
return true ;
break ;
default :
var iLen = oTextbox.value.length;
var sMatch = autocompleteMatch(oTextbox.value, arrValues);
if (sMatch != null ) {
oTextbox.value = sMatch;
textboxSelect(oTextbox, iLen, oTextbox.value.length);
}
return false ;
}
}
< / SCRIPT>
以上是处理方法
如下数组就是你想具有自动完成的字符串.这个可以放在服务器端写,也可以直接放在客户端
<
SCRIPT
>
var arrValues = [ " OK " , " NG " , " RED " ];
< / SCRIPT>
var arrValues = [ " OK " , " NG " , " RED " ];
< / SCRIPT>
以上所述,就完成了自动带出的功能.
方式二:
此种自动完成和上面有很大不同,上面的方式是在输入框里直接带出内容,而下面的方式 是在输入框下带出下拉列表框让你去选择.
这个是http://www.never-online.net/提供的解决方案,看起来不错.
主要代码如下:
<
script type
=
"
text/javascript
"
src
=
"
neverModules-autoComplete.js
"
><
/
script>
< script type = " text/javascript " >
// <![CDATA[
completeDataSource = [
{
' text ' : ' never-online ' ,
' content ' : ' BlueDestiny[a]126.com ' ,
' hints ' : ' http://www.never-online.net '
},
{
' text ' : ' google earth ' ,
' content ' : ' BlueDestiny[a]126.com ' ,
' hints ' : ' http://www.never-online.net '
},
{
' text ' : ' ajax ' ,
' content ' : ' BlueDestiny[a]126.com '
},
{
' text ' : ' blueDestiny ' ,
' content ' : ' BlueDestiny[a]126.com '
},
{
' text ' : ' never-online ' ,
' content ' : ' BlueDestiny[a]126.com ' ,
' hints ' : ' http://www.never-online.net '
},
{
' text ' : ' google earth ' ,
' content ' : ' BlueDestiny[a]126.com ' ,
' hints ' : ' http://www.never-online.net '
},
{
' text ' : ' ajax ' ,
' content ' : ' BlueDestiny[a]126.com '
},
{
' text ' : ' blueDestiny ' ,
' content ' : ' BlueDestiny[a]126.com '
},
{
' text ' : ' never-online ' ,
' content ' : ' BlueDestiny[a]126.com ' ,
' hints ' : ' http://www.never-online.net '
},
{
' text ' : ' google earth ' ,
' content ' : ' BlueDestiny[a]126.com ' ,
' hints ' : ' http://www.never-online.net '
},
{
' text ' : ' ajax ' ,
' content ' : ' BlueDestiny[a]126.com '
},
{
' text ' : ' blueDestiny ' ,
' content ' : ' BlueDestiny[a]126.com '
}
];
var autoComplete = null ;
onload = function pageLoadHdle() {
var configuration = {
instanceName: " autoComplete " ,
textbox: document.getElementById( " demo " ),
dataSource: completeDataSource
};
autoComplete = new neverModules.modules.autocomplete(configuration);
autoComplete.callback = function (autocompleteValue, autocompleteContent) {
document.getElementById( " tx " ).value =
" Your text is:[ " + autocompleteValue + " ]; the content is:[ " + autocompleteContent + " ] " ;
}
autoComplete.useContent = true ;
autoComplete.useSpaceMatch = true ;
autoComplete.ignoreWhere = true ;
autoComplete.create();
autoComplete.expandAllItem();
autoComplete.showAnimateImage( " images/indicator.gif " );
window.setTimeout(
function closeAnimateImageAfter1seconds() {
autoComplete.closeAnimateImage();
}, 1000 );
}
// ]]>
< / script>
< script type = " text/javascript " >
// <![CDATA[
completeDataSource = [
{
' text ' : ' never-online ' ,
' content ' : ' BlueDestiny[a]126.com ' ,
' hints ' : ' http://www.never-online.net '
},
{
' text ' : ' google earth ' ,
' content ' : ' BlueDestiny[a]126.com ' ,
' hints ' : ' http://www.never-online.net '
},
{
' text ' : ' ajax ' ,
' content ' : ' BlueDestiny[a]126.com '
},
{
' text ' : ' blueDestiny ' ,
' content ' : ' BlueDestiny[a]126.com '
},
{
' text ' : ' never-online ' ,
' content ' : ' BlueDestiny[a]126.com ' ,
' hints ' : ' http://www.never-online.net '
},
{
' text ' : ' google earth ' ,
' content ' : ' BlueDestiny[a]126.com ' ,
' hints ' : ' http://www.never-online.net '
},
{
' text ' : ' ajax ' ,
' content ' : ' BlueDestiny[a]126.com '
},
{
' text ' : ' blueDestiny ' ,
' content ' : ' BlueDestiny[a]126.com '
},
{
' text ' : ' never-online ' ,
' content ' : ' BlueDestiny[a]126.com ' ,
' hints ' : ' http://www.never-online.net '
},
{
' text ' : ' google earth ' ,
' content ' : ' BlueDestiny[a]126.com ' ,
' hints ' : ' http://www.never-online.net '
},
{
' text ' : ' ajax ' ,
' content ' : ' BlueDestiny[a]126.com '
},
{
' text ' : ' blueDestiny ' ,
' content ' : ' BlueDestiny[a]126.com '
}
];
var autoComplete = null ;
onload = function pageLoadHdle() {
var configuration = {
instanceName: " autoComplete " ,
textbox: document.getElementById( " demo " ),
dataSource: completeDataSource
};
autoComplete = new neverModules.modules.autocomplete(configuration);
autoComplete.callback = function (autocompleteValue, autocompleteContent) {
document.getElementById( " tx " ).value =
" Your text is:[ " + autocompleteValue + " ]; the content is:[ " + autocompleteContent + " ] " ;
}
autoComplete.useContent = true ;
autoComplete.useSpaceMatch = true ;
autoComplete.ignoreWhere = true ;
autoComplete.create();
autoComplete.expandAllItem();
autoComplete.showAnimateImage( " images/indicator.gif " );
window.setTimeout(
function closeAnimateImageAfter1seconds() {
autoComplete.closeAnimateImage();
}, 1000 );
}
// ]]>
< / script>
然后是对输入控件加上事件
<
input id
=
"
demo
"
onkeyup = " autoComplete.hdleEvent(event) "
ondblclick = " autoComplete.expandAllItem(); " / >
onkeyup = " autoComplete.hdleEvent(event) "
ondblclick = " autoComplete.expandAllItem(); " / >
下面附上原代码http://files.cnblogs.com/zzyyll2/neverModules-autocomplete.rar
以上是两种对输入框自动完成的方法,