UKoom
Documentum, SharePoint, Alfresco, ECM…Auto Complete
Problem Summary
The user needs to enter an item into a text box which could ambiguous or hard to remember and therefore has the potential to be mis-typed.
EXAMPLE:
pattern_autocomplete
Use When
- The suggestions can be pulled from a manageable set of data.
- The input item can be entered in multiple ways.
- The input item can be matched with a specific data item in the system.
- Speed and accuracy of entry is an important goal.
- The total number of items would be too large or inconvenient for displaying in a standard drop down box.
Auto Complete 有很多种解决方案，这里只是一个很简单、易用的sample, JS代码都封装在下面两个js文件中
actb.js 将字段、comment list和event 绑定起来，响应鼠标、键盘的各种动作
commentEvent.js 一些基本的event相关操作方法，被actb.js里面的一些 function调用
You can find a sample zip file at the end of this article.
第一步 引入两个js文件
<script language=”JavaScript” src=”scripts/actb.js”type=”text/javascript”></script>
<script language=”JavaScript” src=”scripts/commonEvent.js” type=”text/javascript”></script>
第二步
用actb对象绑定预定义好的complete list 和target field
<script language=”javascript” type=”text/JavaScript”>
var docbaseArray = new Array(“cms_wrk”,”exdmdv63″,”exdmpr63″);
function initDocbase(){
var docbaseObj = document.getElementById(“docbase”);
var docbaseACTB = new actb(docbaseObj,docbaseArray
}
</script>
第三步
将方法在body中设为onload方法，每次load页面时初始化
<body onload=”initDocbase()” >
Reference: http://developer.yahoo.com/ypatterns/pattern.php?pattern=autocomplete
This article is extended from YW’s study note.