|
Hi,
I've finally managed to clean up the code so it's ready for release.
It's not working in Safari yet
the code and demo is available at
http://www.imaginocreativa.com/slump/autocomplete/index.html
please report any bugs you might find. Success stories are also welcome :p
ciao,
ivan
|
|
|
|
|
two line change, but it does change your api signature:
function actb_tocomplete(sndr,evt,arr,firstOnly){
actb_firstText = firstOnly;
...
I suppose you could do rename actb_tocomplete to be actb_tocomplete_orig, and add these two functions to preserve your API:
function actb_tocomplete(sndr,evt,arr){
actb_firstText = false;
actb_tocomplete_orig(sndr,evt,arr);
}
function actb_tocomplete_first(sndr,evt,arr){
actb_firstText = true;
actb_tocomplete_orig(sndr,evt,arr);
}
function actb_tocomplete_orig(sndr,evt,arr){
...
Jason
|
|
|
|
|
In function actb_mouseclick() this.innerText is undefined.
Had to make these changes to get it going:
function actb_mouseclick(){
if (!actb_display) return;
actb_mouse_on_list = 0;
actb_display = 0;
if (undefined != this.innerText) {
actb_curr.value = this.innerText;
} else {
actb_curr.value = striptags(this.innerHTML);
}
actb_removedisp();
}
function striptags(input) {
var chk;
var ret;
chk = input;
ret = input.replace(/<[^>]*>/,"");
while (ret != chk) {
chk = ret;
ret = ret.replace(/<[^>]*>/,"");
}
return ret;
}
Jason
http://blog.casey-sweat.us/
|
|
|
|
|
BTW, I tried out the actb2 code from a couple of threads down and it worked fine out-of-the-box on both versions of Firefox.
Thanks.
|
|
|
|
|
Okay, there have been numerous bug-fixes n new functionalities suggested by the users with their code. So, here the download has ALL the functionalities?? I mean the example on the code-project doesn't seem to have those updates features in it!
Other than that, this control looks very kool , Keep up this good work!!
|
|
|
|
|
Nope. Under one of the 'todo', I've stated that I'll 'collate everyone's suggestion and modifications to compile a better version of this control'
Certain scipts contributed were built based a previous versions of this controls, thus incorperating them all is rather tedious.
Anyway, thanks for your compliment
|
|
|
|
|
There have been a few posts with additions such as mouse select.
Will there be any updated download posted for this project?
Thanks!
|
|
|
|
|
Yes.
I tried to incorporate all changes and to fix a few bugs
This is actb2.js
quote-----------------
/* ---- Variables ---- */
var actb_timeOut = 10000; // Autocomplete Timeout in ms (-1: autocomplete never time out)
var actb_lim = 8; // Number of elements autocomplete can show (-1: no limit)
var actb_firstText = false; // should the auto complete be limited to the beginning of keyword?
var actb_same_size = true; //Should the autocomplete be the same size as the widget (true), or sized based on its elements(false)?
var actb_enable_mouse = true; //Enable mouse support, or just keyboard. Enablingmouse with actb_timeOut set to -1 can cause some unusual behavior.
/* ---- Variables ---- */
/* ---- Constants ---- */
var actb_keywords = new Array();
var actb_display = false;
var actb_pos = 0;
var actb_total = 0;
var actb_curr = null;
var actb_rangeu = 0;
var actb_ranged = 0;
var actb_bool = new Array();
var actb_pre = 0;
var actb_toid;
var actb_tomake = false;
var mouse_on_list = 0;
/* ---- Constants ---- */
function getTargetElement(evt) {
var elem
if (evt.target) {
elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target;
}
else {
elem = evt.srcElement;
}
return elem;
}
function actb_parse(n,j){//added j to define span id as 'tat_td'+(j)
var t = escape(actb_curr.value);
var tobuild = '';
var i;
if (actb_firstText){
var re = new RegExp("^" + t, "i");
}
else{
var re = new RegExp(t, "i");
}
var p = n.search(re);
for (i=0;i<p;i++){
tobuild += n.substr(i,1);
}
tobuild += "<span class='actb_regex_match'";
tobuild += " id='tat_td";
tobuild += (j);
tobuild += "' >";
for (i=p;i<t.length+p;i++){
for (i=p;i<t.length+p;i++){
tobuild += n.substr(i,1);
}
}
tobuild += "</span>";
for (i=t.length+p;i<n.length;i++){
tobuild += n.substr(i,1);
}
return unescape(tobuild);
}
function curTop(){
actb_toreturn = 0;
obj = actb_curr;
while(obj){
actb_toreturn += obj.offsetTop;
obj = obj.offsetParent;
}
return actb_toreturn;
}
function curLeft(){
actb_toreturn = 0;
obj = actb_curr;
while(obj){
actb_toreturn += obj.offsetLeft;
obj = obj.offsetParent;
}
return actb_toreturn;
}
function actb_generate(actb_bool){
if (document.getElementById('tat_table')) document.body.removeChild(document.getElementById('tat_table'));
a = document.createElement('table');
a.className='actb_table';
if (actb_same_size) a.width=field_size;
a.style.top = eval(curTop() + actb_curr.offsetHeight) + "px";
a.style.left = curLeft() + "px";
a.id = 'tat_table';
if (actb_enable_mouse){
a.onmouseover = table_focus;
a.onmouseout= table_unfocus;
}
document.body.appendChild(a);
var i;
var first = true;
var j = 1;
var counter = 0;
for (i=0;i<actb_keywords.length;i++){
if (actb_bool[i]){
counter++;
r = a.insertRow(-1);
if (first && !actb_tomake){
r.className = 'actb_active';
first = false;
actb_pos = counter;
}
else if(actb_pre == i){
r.className = 'actb_active';
first = false;
actb_pos = counter;
}
r.id = 'tat_tr'+(j);
c = r.insertCell(-1);
if (actb_enable_mouse) c.onclick = actb_click_table;
c.innerHTML = actb_parse(escape(actb_keywords[i]),j);
c.id = 'tat_td'+(j);
j++;
}
if (j - 1 == actb_lim && j < actb_total){
r = a.insertRow(-1);
c = r.insertCell(-1);
c.className='actb_arrow_down';
if (actb_enable_mouse) c.onclick = actb_click_down;
c.innerHTML = ' ';
break;
}
}
actb_rangeu = 1;
actb_ranged = j-1;
actb_display = true;
if (actb_pos <= 0) actb_pos = 1;
}
function actb_remake(){
document.body.removeChild(document.getElementById('tat_table'));
a = document.createElement('table');
a.className='actb_table';
if (actb_same_size) a.width=field_size;
a.style.top = eval(curTop() + actb_curr.offsetHeight) + "px";
a.style.left = curLeft() + "px";
a.id = 'tat_table';
if (actb_enable_mouse){
a.onmouseover = table_focus;
a.onmouseout = table_unfocus;
}
document.body.appendChild(a);
var i;
var first = true;
var j = 1;
if (actb_rangeu > 1){
r = a.insertRow(-1);
c = r.insertCell(-1);
c.className='actb_arrow_up';
if (actb_enable_mouse) c.onclick = actb_click_up;
c.innerHTML = ' ';
}
for (i=0;i<actb_keywords.length;i++){
if (actb_bool[i]){
if (j >= actb_rangeu && j <= actb_ranged){
r = a.insertRow(-1);
r.id = 'tat_tr'+(j);
c = r.insertCell(-1);
c.innerHTML = actb_parse(escape(actb_keywords[i]),j);
if (actb_enable_mouse) c.onclick = actb_click_table;
c.id = 'tat_td'+(j);
j++;
}
else{
j++;
}
}
if (j > actb_ranged) break;
}
if (j-1 < actb_total){
r = a.insertRow(-1);
c = r.insertCell(-1);
c.className='actb_arrow_down';
if (actb_enable_mouse) c.onclick = actb_click_down;
c.innerHTML = ' ';
}
}
function actb_goup(){
if (!actb_display) return;
if (actb_pos == 1) return;
document.getElementById('tat_tr'+actb_pos).className = '';
actb_pos--;
if (actb_pos < actb_rangeu) actb_moveup();
document.getElementById('tat_tr'+actb_pos).className = 'actb_active';
if (actb_toid) clearTimeout(actb_toid);
if (actb_timeOut > 0) actb_toid = setTimeout("actb_removedisp(evt.srcElement)",actb_timeOut);
}
function actb_godown(){
if (!actb_display) return;
if (actb_pos == actb_total) return;
document.getElementById('tat_tr'+actb_pos).className = '';
actb_pos++;
if (actb_pos > actb_ranged) actb_movedown();
document.getElementById('tat_tr'+actb_pos).className = 'actb_active';
if (actb_toid) clearTimeout(actb_toid);
if (actb_timeOut > 0) actb_toid = setTimeout("actb_removedisp(evt.srcElement)",actb_timeOut);
}
function actb_movedown(){
actb_rangeu++;
actb_ranged++;
actb_remake(field_size);
}
function actb_moveup(){
actb_rangeu--;
actb_ranged--;
actb_remake(field_size);
}
function actb_click_table(evt){
evt = (evt) ? evt : ((window.event) ? window.event : "");
if (evt) {
var elem = getTargetElement(evt);
if (elem) {
actb_pos = elem.id.substr(6,50);
mouse_on_list = 0;
actb_penter();
}
}
}
function actb_click_down(evt){
evt = (evt) ? evt : ((window.event) ? window.event : "");
if (evt) {
var elem = getTargetElement(evt);
if (elem) {
actb_pos = elem.id.substr(6,50);
actb_movedown();
if (actb_toid) clearTimeout(actb_toid);
if (actb_timeOut > 0) actb_toid = setTimeout("actb_removedisp(evt.srcElement)",actb_timeOut);
}
}
}
function actb_click_up(evt){
evt = (evt) ? evt : ((window.event) ? window.event : "");
if (evt) {
var elem = getTargetElement(evt);
if (elem) {
actb_pos = elem.id.substr(6,50);
actb_moveup();
if (actb_toid) clearTimeout(actb_toid);
if (actb_timeOut > 0) actb_toid = setTimeout("actb_removedisp(evt.srcElement)",actb_timeOut);
}
}
}
function table_focus(evt){
mouse_on_list = 1;
}
function table_unfocus(evt){
mouse_on_list = 0;
if (actb_toid) clearTimeout(actb_toid);
if (actb_timeOut > 0) actb_toid = setTimeout("actb_removedisp(evt.srcElement)",actb_timeOut);
}
function actb_penter(){
if (!actb_display) return;
actb_display = 0;
var word = '';
var c = 0;
for (var i=0;i<=actb_keywords.length;i++){
if (actb_bool[i]) c++;
if (c == actb_pos){
word = actb_keywords[i];
break;
}
}
a = word;//actb_keywords[actb_pos-1];//document.getElementById('tat_td'+actb_pos).;
actb_curr.value = a;
actb_removedisp();
}
function actb_removedisp(sndr){
if (mouse_on_list == 0 || sndr.value == '') {
actb_display = false;
if (document.getElementById('tat_table')) document.body.removeChild(document.getElementById('tat_table'));
if (actb_toid) clearTimeout(actb_toid);
}
}
function actb_checkkey(evt){
a = evt.keyCode;
if (a == 38){ // up key
actb_goup();
}
else if(a == 40){ // down key
actb_godown();
}
else if(a == 13){//enter key
actb_penter();
}
}
function actb_tocomplete(sndr,evt,arr){
if (arr) {
actb_keywords = arr;
}
if (evt.keyCode == 38 || evt.keyCode == 40 || evt.keyCode == 13) return;
var i;
if (actb_display){
var word = 0;
var c = 0;
for (var i=0;i<=actb_keywords.length;i++){
if (actb_bool[i]) c++;
if (c == actb_pos){
word = i;
break;
}
}
actb_pre = word;//actb_pos;
}
else{
actb_pre = -1;
}
if (!sndr) var sndr = evt.srcElement;
actb_curr = sndr;
field_size = sndr.offsetWidth;
if (sndr.value == ''){
actb_removedisp(sndr);
return;
}
var t = escape(sndr.value);
if (actb_firstText){
var re = new RegExp("^" + t, "i");
}
else{
var re = new RegExp(t, "i");
}
actb_total = 0;
actb_tomake = false;
for (i=0;i<actb_keywords.length;i++){
actb_bool[i] = false;
if (re.test(escape(actb_keywords[i]))){
actb_total++;
actb_bool[i] = true;
if (actb_pre == i) actb_tomake = true;
}
}
if (actb_toid) clearTimeout(actb_toid);
if (actb_timeOut > 0) actb_toid = setTimeout("actb_removedisp(sndr)",actb_timeOut);
actb_generate(actb_bool);
}
UNQUOTE-----------------------
and this is actb2.css
QUOTE-----------------------
.actb_table
{
border-right: 1px solid;
padding-right: 2px;
border-top: 1px solid;
padding-left: 2px;
font-size: 11px;
padding-bottom: 2px;
border-left: 1px solid;
cursor: hand;
padding-top: 2px;
border-bottom: 1px solid;
font-family: Verdana;
position: absolute;
background-color: #ffffcc;
border-spacing: 1px;
}
.actb_active
{
background-color: #ffcc00;
}
.actb_regex_match { text-decoration:underline;
font-weight:bold;
}
.actb_arrow_down
{
padding-right: 0px;
background-position: center center;
padding-left: 0em;
z-index: 4;
background-image: url(arrowDown.gif);
padding-bottom: 0px;
margin: 0px 1em;
cursor: hand;
padding-top: 0px;
background-repeat: no-repeat;
height: 2em;
background-color: transparent;
}
.actb_arrow_up
{
padding-right: 0px;
background-position: center center;
padding-left: 0em;
z-index: 4;
background-image: url(arrowUp.gif);
padding-bottom: 0px;
margin: 0px 1em;
cursor: hand;
padding-top: 0px;
background-repeat: no-repeat;
background-color: transparent;
height: 2em;
}
UNQUOTE--------------------------------------
and finally
this is actb2.htm
QUOTE------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META content="http://schemas.microsoft.com/intellisense/ie5" name=vs_targetSchema>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="MSHTML 6.00.2600.0" name=GENERATOR>
<link rel="StyleSheet" href="actb2.css">
<TITLE>improved widget with mouse support</TITLE>
<SCRIPT language=javascript src="actb2.js" type=text/javascript></SCRIPT>
<script language="javascript">
<!--
var customarray=new Array('apple','alligator','elephant','pear','kingbird','kingbolt','kingcraft','kingcup','kingdom','kingfisher','kingpin');
-->
</script>
</HEAD>
<BODY>
<INPUT size=35 type="text" autocomplete=off value='' id = truc language=javascript onkeyup="actb_tocomplete(this, event,customarray);" onblur="actb_removedisp(this);" onkeydown="actb_checkkey(event);">
</BODY>
</HTML>
UNQUOTE------------------------------------------
Hope you enjoy them!
Vincent
|
|
|
|
|
I have it working with multiple words per line but this is the first javascript I have written and it is kinda messy code but if someone wants to re do it more elegantly please do.
basically it takes the input and runs it through the getContents function that checks for ", " in which case it makes a copy of the input string "object" from after the comma to the end of the string. both the object containing the end of the string and the full object are passed to the actb_tocomplete funtion... the variable totalForm is set to the text box input, the autocomplete functions are run on the partial string and when they are returned to the form everything after the last comma "what ever has been typed of the word" is cleared with clearAfter() and replaced with the new word + ", " to make the next autocomplete go when a letter is typed....
html file
--------------------------------------------------
<html>
<head>
<script language="javascript" type="text/javascript" src="actb.js"></script>
<script>
var customarray=new Array('apple','alligator','elephant','pear','kingbird','king bolt','kingcraft','kingcup','kingdom','kingfisher','kingpin');
function copy_obj(o) {
var c = new Object();
for (var e in o) {
c[e] = o[e];
}
return c;
}
function getContents(text)
{
token = ", ";
send = copy_obj(text);
commaPlace = text.value.lastIndexOf(token);
if (commaPlace != -1)
{
start = commaPlace + 2;
end = text.value.length;
val = text.value.slice(start, end);
send.value = val;
return send;
}
return text;
}
</script>
<style type="text/css">
.keywords{
width:600px;
}
</style>
</head>
<body>
<p>
for auto complete to work there must be a comma and a space between each word like
brushes, animals, chickens, ect ect
</p>
<input class="keywords" type='textbox' onkeydown='actb_checkkey(event);' onkeyup='Value=getContents(this); actb_tocomplete(Value,this,event,customarray);' onblur='actb_removedisp()' value=''/>
</body>
</html>
--------------------------------------------------
actb.js
----------------------------------------------------
/* ---- Variables ---- */
var actb_timeOut = -1; // Autocomplete Timeout in ms (-1: autocomplete never time out)
var actb_lim = 12; // Number of elements autocomplete can show (-1: no limit)
var actb_firstText = true; // should the auto complete be limited to the beginning of keyword?
/* ---- Variables ---- */
/* --- Styles --- */
var actb_bgColor = '#888888';
var actb_textColor = '#FFFFFF';
var actb_hColor = '#000000';
var actb_fFamily = 'Verdana';
var actb_fSize = '11px';
var actb_hStyle = 'text-decoration:underline;font-weight="bold"';
/* --- Styles --- */
/* ---- Constants ---- */
var actb_keywords = new Array();
var actb_display = false;
var actb_pos = 0;
var actb_total = 0;
var actb_curr = null;
var actb_rangeu = 0;
var actb_ranged = 0;
var actb_bool = new Array();
var actb_pre = 0;
var actb_toid;
var actb_tomake = false;
/* ---- Constants ---- */
var totalForm = '';
function actb_parse(n){
var t = escape(actb_curr.value);
var tobuild = '';
var i;
if (actb_firstText){
var re = new RegExp("^" + t, "i");
}else{
var re = new RegExp(t, "i");
}
var p = n.search(re);
for (i=0;i<p;i++){
tobuild += n.substr(i,1);
}
tobuild += "<font style='"+(actb_hStyle)+"'>"
for (i=p;i<t.length+p;i++){
tobuild += n.substr(i,1);
}
tobuild += "</font>";
for (i=t.length+p;i<n.length;i++){
tobuild += n.substr(i,1);
}
return tobuild;
}
function curTop(){
actb_toreturn = 0;
obj = actb_curr;
while(obj){
actb_toreturn += obj.offsetTop;
obj = obj.offsetParent;
}
return actb_toreturn;
}
function curLeft(){
actb_toreturn = 0;
obj = actb_curr;
while(obj){
actb_toreturn += obj.offsetLeft;
obj = obj.offsetParent;
}
return actb_toreturn;
}
function actb_generate(){
if (document.getElementById('tat_table')) document.body.removeChild(document.getElementById('tat_table'));
a = document.createElement('table');
a.cellSpacing='1px';
a.cellPadding='2px';
a.style.position='absolute';
a.style.top = eval(curTop() + actb_curr.offsetHeight) + "px";
a.style.left = curLeft() + "px";
a.style.backgroundColor=actb_bgColor;
a.id = 'tat_table';
document.body.appendChild(a);
var i;
var first = true;
var j = 1;
var counter = 0;
for (i=0;i<actb_keywords.length;i++){
if (actb_bool[i]){
counter++;
r = a.insertRow(-1);
if (first && !actb_tomake){
r.style.backgroundColor = actb_hColor;
first = false;
actb_pos = counter;
}else if(actb_pre == i){
r.style.backgroundColor = actb_hColor;
first = false;
actb_pos = counter;
}else{
r.style.backgroundColor = actb_bgColor;
}
r.id = 'tat_tr'+(j);
c = r.insertCell(-1);
c.style.color = actb_textColor;
c.style.fontFamily = actb_fFamily;
c.style.fontSize = actb_fSize;
c.innerHTML = actb_parse(actb_keywords[i]);
c.id = 'tat_td'+(j);
j++;
}
if (j - 1 == actb_lim && j < actb_total){
r = a.insertRow(-1);
r.style.backgroundColor = actb_bgColor;
c = r.insertCell(-1);
c.style.color = actb_textColor;
c.style.fontFamily = 'arial narrow';
c.style.fontSize = actb_fSize;
c.align='center';
c.innerHTML = '\\/';
break;
}
}
actb_rangeu = 1;
actb_ranged = j-1;
actb_display = true;
if (actb_pos <= 0) actb_pos = 1;
}
function actb_remake(){
document.body.removeChild(document.getElementById('tat_table'));
a = document.createElement('table');
a.cellSpacing='1px';
a.cellPadding='2px';
a.style.position='absolute';
a.style.top = eval(curTop() + actb_curr.offsetHeight) + "px";
a.style.left = curLeft() + "px";
a.style.backgroundColor=actb_bgColor;
a.id = 'tat_table';
document.body.appendChild(a);
var i;
var first = true;
var j = 1;
if (actb_rangeu > 1){
r = a.insertRow(-1);
r.style.backgroundColor = actb_bgColor;
c = r.insertCell(-1);
c.style.color = actb_textColor;
c.style.fontFamily = 'arial narrow';
c.style.fontSize = actb_fSize;
c.align='center';
c.innerHTML = '/\\';
}
for (i=0;i<actb_keywords.length;i++){
if (actb_bool[i]){
if (j >= actb_rangeu && j <= actb_ranged){
r = a.insertRow(-1);
r.style.backgroundColor = actb_bgColor;
r.id = 'tat_tr'+(j);
c = r.insertCell(-1);
c.style.color = actb_textColor;
c.style.fontFamily = actb_fFamily;
c.style.fontSize = actb_fSize;
c.innerHTML = actb_parse(actb_keywords[i]);
c.id = 'tat_td'+(j);
j++;
}else{
j++;
}
}
if (j > actb_ranged) break;
}
if (j-1 < actb_total){
r = a.insertRow(-1);
r.style.backgroundColor = actb_bgColor;
c = r.insertCell(-1);
c.style.color = actb_textColor;
c.style.fontFamily = 'arial narrow';
c.style.fontSize = actb_fSize;
c.align='center';
c.innerHTML = '\\/';
}
}
function actb_goup(){
if (!actb_display) return;
if (actb_pos == 1) return;
document.getElementById('tat_tr'+actb_pos).style.backgroundColor = actb_bgColor;
actb_pos--;
if (actb_pos < actb_rangeu) actb_moveup();
document.getElementById('tat_tr'+actb_pos).style.backgroundColor = actb_hColor;
if (actb_toid) clearTimeout(actb_toid);
if (actb_timeOut > 0) actb_toid = setTimeout("actb_removedisp()",actb_timeOut);
}
function actb_godown(){
if (!actb_display) return;
if (actb_pos == actb_total) return;
document.getElementById('tat_tr'+actb_pos).style.backgroundColor = actb_bgColor;
actb_pos++;
if (actb_pos > actb_ranged) actb_movedown();
document.getElementById('tat_tr'+actb_pos).style.backgroundColor = actb_hColor;
if (actb_toid) clearTimeout(actb_toid);
if (actb_timeOut > 0) actb_toid = setTimeout("actb_removedisp()",actb_timeOut);
}
function actb_movedown(){
actb_rangeu++;
actb_ranged++;
actb_remake();
}
function actb_moveup(){
actb_rangeu--;
actb_ranged--;
actb_remake();
}
function actb_penter(){
if (!actb_display) return;
actb_display = 0;
var word = '';
var c = 0;
for (var i=0;i<=actb_keywords.length;i++){
if (actb_bool[i]) c++;
if (c == actb_pos){
word = actb_keywords[i];
break;
}
}
a = word;//actb_keywords[actb_pos-1];//document.getElementById('tat_td'+actb_pos).;
//totalForm += a + ",";
//actb_curr.value = totalForm;
clearAfter();
if(totalForm.value != '') totalForm.value += " ";
totalForm.value += a + ", ";
actb_removedisp();
}
function clearAfter(){
//clear everything after last comma
start = 0;
end = totalForm.value.lastIndexOf(",") + 1;
newVal = totalForm.value.slice(start, end);
totalForm.value = newVal;
}
function actb_removedisp(){
actb_display = 0;
if (document.getElementById('tat_table')) document.body.removeChild(document.getElementById('tat_table'));
if (actb_toid) clearTimeout(actb_toid);
}
function actb_checkkey(evt){
a = evt.keyCode;
if (a == 38){ // up key
actb_goup();
}else if(a == 40){ // down key
actb_godown();
}else if(a == 13){
actb_penter();
}
}
function actb_tocomplete(sndr,formObj,evt,arr){
totalForm = formObj;
if (arr) actb_keywords = arr;
if (evt.keyCode == 38 || evt.keyCode == 40 || evt.keyCode == 13) return;
var i;
if (actb_display){
var word = 0;
var c = 0;
for (var i=0;i<=actb_keywords.length;i++){
if (actb_bool[i]) c++;
if (c == actb_pos){
word = i;
break;
}
}
actb_pre = word;//actb_pos;
}else{ actb_pre = -1};
if (!sndr) var sndr = evt.srcElement;
actb_curr = sndr;
if (sndr.value == ''){
actb_removedisp();
return;
}
var t = escape(sndr.value);
if (actb_firstText){
var re = new RegExp("^" + t, "i");
}else{
var re = new RegExp(t, "i");
}
actb_total = 0;
actb_tomake = false;
for (i=0;i<actb_keywords.length;i++){
actb_bool[i] = false;
if (re.test(actb_keywords[i])){
actb_total++;
actb_bool[i] = true;
if (actb_pre == i) actb_tomake = true;
}
}
if (actb_toid) clearTimeout(actb_toid);
if (actb_timeOut > 0) actb_toid = setTimeout("actb_removedisp()",actb_timeOut);
actb_generate(actb_bool);
}
----------------------------------------------------
|
|
|
|
|
Hi all.
I also added multiply selection feature to the control .
There are only 4 changes in actb.js file
Hope it will be useful for somebody.
actb.js ChangeLog:
1. in Variables section - add
var actb_enable_multiply = 1; //Enable multiply select of values with actb_separator
var actb_separator = ";---;"; //Any Separator string for multiply select
2. in actb_parse function - change
------------------------------------------------------------
// check for multiple select
if (actb_enable_multiply) {
var t_arr = actb_curr.value.split(actb_separator);
if (t_arr.length > 0)
t = escape(t_arr[t_arr.length - 1]);
}
else
var t = escape(actb_curr.value);
------------------------------------------------------------------
instead of
var t = escape(actb_curr.value);
3. in actb_penter function - change
--------------------------------------------------------
// check for multiply select
if (actb_enable_multiply) {
var t_last_index = actb_curr.value.lastIndexOf(actb_separator);
if (t_last_index > 0)
var t_last = actb_curr.value.substring(0,t_last_index+actb_separator.length);
else
var t_last = "";
actb_curr.value = t_last + a + actb_separator;
}
else
actb_curr.value = a;
---------------------------------------------------------
instead of
actb_curr.value = a;
4.in actb_autocomplete function - change
------------------------------------------------------
// check for multiply select
if (actb_enable_multiply) {
var t_arr = sndr.value.split(actb_separator);
if (t_arr.length > 0)
t = escape(t_arr[t_arr.length - 1]);
}
else
var t = escape(sndr.value);
------------------------------------------------------------
instead of
var t = escape(sndr.value);
That's all
|
|
|
|
|
I've made a few changes to the widget so that it works with the mouse, and moved the style information out of the js and into a separate CSS file for more flexibility. It turns out the reson the arrow keys won't work in konqueror is because konqueror gives invalid keycodes (0) for the keys, so that's not really fixable. Works great with the mouse in IE, Mozilla, Konqueror, and Safari. Email me if you'd like me to send it to you.
What is the license on this code? May I use it in a BSD licensed project? Thanks for a great widget.
|
|
|
|
|
sure you can use it in your project
and yep, I would like to look at the modifications you make so I can update my code for the better
Actually I've already made some modifications a week ago but the article is not updated yet;P
|
|
|
|
|
OK, here is a universal diff of the changes, I hope this is a format you can use as the changes are a bit too extensive to just note manually. A few of them are obviously just cosmetic, and a couple are just irrelevant (like making the demo HTML 4.01 compliant). The new css file refers to a couple of images (for the arrows), which I can't attach on these forums. Send me an email with your email address if you'd like a zipfile containing all the files.
Alec
The first entry is just the new css file. The rest are the modifications.
diff -urbwN actb_old/actb.css actb_new/actb.css
--- actb_old/actb.css 1969-12-31 16:00:00.000000000 -0800
+++ actb_new/actb.css 2004-09-15 18:45:58.000000000 -0700
@@ -0,0 +1,32 @@
+.actb_table { padding:2px;
+ border-spacing:1px;
+ position:absolute;
+ background-color:white;
+ font-family: Verdana;
+ font-size: 11px;
+ border:1px solid;
+
+}
+
+.actb_active { background-color:#888888;
+}
+
+.actb_regex_match { text-decoration:underline;
+ font-weight:bold;
+}
+
+.actb_arrow_down { background-image: url(arrowDown.gif);
+ background-repeat: no-repeat;
+ background-position: center center;
+ z-index: 4;
+ padding: 0 0 0 1em;
+ margin: 0 1em 0 0;
+}
+
+.actb_arrow_up { background-image: url(arrowUp.gif);
+ background-repeat: no-repeat;
+ background-position: center center;
+ z-index: 4;
+ padding: 0 0 0 1em;
+ margin: 0 1em 0 0;
+}
\ No newline at end of file
diff -urbwN actb_old/actb.htm actb_new/actb.htm
--- actb_old/actb.htm 2004-08-15 01:16:50.000000000 -0700
+++ actb_new/actb.htm 2004-09-17 08:07:28.000000000 -0700
@@ -1,12 +1,19 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
-<script language="javascript" type="text/javascript" src="actb.js"></script>
-<script>
+<title>Widget</title>
+<link rel="StyleSheet" href="actb.css">
+<script type="text/javascript" src="actb.js"></script>
+<script type="text/javascript">
+<!--
var customarray=new Array('apple','alligator','elephant','pear','kingbird','kingbolt','kingcraft','kingcup','kingdom','kingfisher','kingpin');
+-->
</script>
</head>
<body>
-<input type='textbox' onkeydown='actb_checkkey(event);' onkeyup='actb_tocomplete(this,event,customarray)' onblur='actb_removedisp()' value=''/>
+
+<input size="35" type="text" onkeydown="actb_checkkey(event);" autocomplete="off" onkeyup="actb_tocomplete(this,event,customarray);" onblur="actb_removedisp(this)" value=""/>
+
</body>
</html>
\ No newline at end of file
diff -urbwN actb_old/actb.js actb_new/actb.js
--- actb_old/actb.js 2004-08-20 15:17:34.000000000 -0700
+++ actb_new/actb.js 2004-09-17 08:15:12.000000000 -0700
@@ -1,18 +1,11 @@
/* ---- Variables ---- */
-var actb_timeOut = -1; // Autocomplete Timeout in ms (-1: autocomplete never time out)
+var actb_timeOut = 1500; // Autocomplete Timeout in ms (-1: autocomplete nevertime out)
var actb_lim = 4; // Number of elements autocomplete can show (-1: no limit)
var actb_firstText = false; // should the auto complete be limited to the beginning of keyword?
+var actb_same_size = 1; //Should the autocomplete be the same size as the widget (true), or sized based on its elements(false)?
+var actb_enable_mouse = 1; //Enable mouse support, or just keyboard. Enablingmouse with actb_timeOut set to -1 can cause some unusual behavior.
/* ---- Variables ---- */
-/* --- Styles --- */
-var actb_bgColor = '#888888';
-var actb_textColor = '#FFFFFF';
-var actb_hColor = '#000000';
-var actb_fFamily = 'Verdana';
-var actb_fSize = '11px';
-var actb_hStyle = 'text-decoration:underline;font-weight="bold"';
-/* --- Styles --- */
-
/* ---- Constants ---- */
var actb_keywords = new Array();
var actb_display = false;
@@ -25,8 +18,20 @@
var actb_pre = 0;
var actb_toid;
var actb_tomake = false;
+var mouse_on_list = 0;
/* ---- Constants ---- */
+function getTargetElement(evt) {
+ var elem
+ if (evt.target) {
+ elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target
+ } else {
+ elem = evt.srcElement
+ }
+ return elem
+
+}
+
function actb_parse(n){
var t = escape(actb_curr.value);
var tobuild = '';
@@ -42,15 +47,15 @@
for (i=0;i<p;i++){
tobuild += n.substr(i,1);
}
- tobuild += "<font style='"+(actb_hStyle)+"'>"
+ tobuild += "<span class='actb_regex_match'>";
for (i=p;i<t.length+p;i++){
tobuild += n.substr(i,1);
}
- tobuild += "</font>";
+ tobuild += "</span>";
for (i=t.length+p;i<n.length;i++){
tobuild += n.substr(i,1);
}
- return tobuild;
+ return unescape(tobuild);
}
function curTop(){
actb_toreturn = 0;
@@ -70,16 +75,18 @@
}
return actb_toreturn;
}
-function actb_generate(){
+function actb_generate(actb_bool){
if (document.getElementById('tat_table')) document.body.removeChild(document.getElementById('tat_table'));
a = document.createElement('table');
- a.cellSpacing='1px';
- a.cellPadding='2px';
- a.style.position='absolute';
+ a.className='actb_table';
+ if (actb_same_size) a.width=field_size;
a.style.top = eval(curTop() + actb_curr.offsetHeight) + "px";
a.style.left = curLeft() + "px";
- a.style.backgroundColor=actb_bgColor;
a.id = 'tat_table';
+ if (actb_enable_mouse){
+ a.onmouseover = table_focus;
+ a.onmouseout= table_unfocus;
+ }
document.body.appendChild(a);
var i;
var first = true;
@@ -91,34 +98,27 @@
counter++;
r = a.insertRow(-1);
if (first && !actb_tomake){
- r.style.backgroundColor = actb_hColor;
+ r.className = 'actb_active';
first = false;
actb_pos = counter;
}else if(actb_pre == i){
- r.style.backgroundColor = actb_hColor;
+ r.className = 'actb_active';
first = false;
actb_pos = counter;
- }else{
- r.style.backgroundColor = actb_bgColor;
}
r.id = 'tat_tr'+(j);
c = r.insertCell(-1);
- c.style.color = actb_textColor;
- c.style.fontFamily = actb_fFamily;
- c.style.fontSize = actb_fSize;
- c.innerHTML = actb_parse(actb_keywords[i]);
+ if (actb_enable_mouse) c.onclick = actb_click_table;
+ c.innerHTML = actb_parse(escape(actb_keywords[i]));
c.id = 'tat_td'+(j);
j++;
}
if (j - 1 == actb_lim && j < actb_total){
r = a.insertRow(-1);
- r.style.backgroundColor = actb_bgColor;
c = r.insertCell(-1);
- c.style.color = actb_textColor;
- c.style.fontFamily = 'arial narrow';
- c.style.fontSize = actb_fSize;
- c.align='center';
- c.innerHTML = '\\/';
+ c.className='actb_arrow_down';
+ if (actb_enable_mouse) c.onclick = actb_click_down;
+ c.innerHTML = ' ';
break;
}
}
@@ -130,38 +130,34 @@
function actb_remake(){
document.body.removeChild(document.getElementById('tat_table'));
a = document.createElement('table');
- a.cellSpacing='1px';
- a.cellPadding='2px';
- a.style.position='absolute';
+ a.className='actb_table';
+ if (actb_same_size) a.width=field_size;
a.style.top = eval(curTop() + actb_curr.offsetHeight) + "px";
a.style.left = curLeft() + "px";
- a.style.backgroundColor=actb_bgColor;
a.id = 'tat_table';
+ if (actb_enable_mouse){
+ a.onmouseover = table_focus;
+ a.onmouseout = table_unfocus;
+ }
document.body.appendChild(a);
var i;
var first = true;
var j = 1;
if (actb_rangeu > 1){
r = a.insertRow(-1);
- r.style.backgroundColor = actb_bgColor;
c = r.insertCell(-1);
- c.style.color = actb_textColor;
- c.style.fontFamily = 'arial narrow';
- c.style.fontSize = actb_fSize;
- c.align='center';
- c.innerHTML = '/\\';
+ c.className='actb_arrow_up';
+ if (actb_enable_mouse) c.onclick = actb_click_up;
+ c.innerHTML = ' ';
}
for (i=0;i<actb_keywords.length;i++){
if (actb_bool[i]){
if (j >= actb_rangeu && j <= actb_ranged){
r = a.insertRow(-1);
- r.style.backgroundColor = actb_bgColor;
r.id = 'tat_tr'+(j);
c = r.insertCell(-1);
- c.style.color = actb_textColor;
- c.style.fontFamily = actb_fFamily;
- c.style.fontSize = actb_fSize;
- c.innerHTML = actb_parse(actb_keywords[i]);
+ c.innerHTML = actb_parse(escape(actb_keywords[i]));
+ if (actb_enable_mouse) c.onclick = actb_click_table;
c.id = 'tat_td'+(j);
j++;
}else{
@@ -172,45 +168,91 @@
}
if (j-1 < actb_total){
r = a.insertRow(-1);
- r.style.backgroundColor = actb_bgColor;
c = r.insertCell(-1);
- c.style.color = actb_textColor;
- c.style.fontFamily = 'arial narrow';
- c.style.fontSize = actb_fSize;
- c.align='center';
- c.innerHTML = '\\/';
+ c.className='actb_arrow_down';
+ if (actb_enable_mouse) c.onclick = actb_click_down;
+ c.innerHTML = ' ';
}
}
function actb_goup(){
if (!actb_display) return;
if (actb_pos == 1) return;
- document.getElementById('tat_tr'+actb_pos).style.backgroundColor = actb_bgColor;
+ document.getElementById('tat_tr'+actb_pos).className = '';
actb_pos--;
if (actb_pos < actb_rangeu) actb_moveup();
- document.getElementById('tat_tr'+actb_pos).style.backgroundColor = actb_hColor;
+ document.getElementById('tat_tr'+actb_pos).className = 'actb_active';
if (actb_toid) clearTimeout(actb_toid);
if (actb_timeOut > 0) actb_toid = setTimeout("actb_removedisp()",actb_timeOut);
}
function actb_godown(){
if (!actb_display) return;
if (actb_pos == actb_total) return;
- document.getElementById('tat_tr'+actb_pos).style.backgroundColor = actb_bgColor;
+ document.getElementById('tat_tr'+actb_pos).className = '';
actb_pos++;
if (actb_pos > actb_ranged) actb_movedown();
- document.getElementById('tat_tr'+actb_pos).style.backgroundColor = actb_hColor;
+ document.getElementById('tat_tr'+actb_pos).className = 'actb_active';
if (actb_toid) clearTimeout(actb_toid);
if (actb_timeOut > 0) actb_toid = setTimeout("actb_removedisp()",actb_timeOut);
}
function actb_movedown(){
actb_rangeu++;
actb_ranged++;
- actb_remake();
+ actb_remake(field_size);
}
function actb_moveup(){
actb_rangeu--;
actb_ranged--;
- actb_remake();
+ actb_remake(field_size);
+}
+
+function actb_click_table(evt){
+ evt = (evt) ? evt : ((window.event) ? window.event : "")
+ if (evt) {
+ var elem = getTargetElement(evt)
+ if (elem) {
+ actb_pos = elem.id.substr(6,50);
+ mouse_on_list = 0;
+ actb_penter();
+ }
+ }
+}
+
+function actb_click_down(evt){
+ evt = (evt) ? evt : ((window.event) ? window.event : "")
+ if (evt) {
+ var elem = getTargetElement(evt)
+ if (elem) {
+ actb_pos = elem.id.substr(6,50);
+ actb_movedown();
+ if (actb_toid) clearTimeout(actb_toid);
+ if (actb_timeOut > 0) actb_toid = setTimeout("actb_removedisp()",actb_timeOut);
+ }
}
+}
+
+function actb_click_up(evt){
+ evt = (evt) ? evt : ((window.event) ? window.event : "")
+ if (evt) {
+ var elem = getTargetElement(evt)
+ if (elem) {
+ actb_pos = elem.id.substr(6,50);
+ actb_moveup();
+ if (actb_toid) clearTimeout(actb_toid);
+ if (actb_timeOut > 0) actb_toid = setTimeout("actb_removedisp()",actb_timeOut);
+ }
+ }
+}
+
+function table_focus(evt){
+ mouse_on_list = 1;
+}
+
+function table_unfocus(evt){
+ mouse_on_list = 0;
+ if (actb_toid) clearTimeout(actb_toid);
+ if (actb_timeOut > 0) actb_toid = setTimeout("actb_removedisp()",actb_timeOut);
+}
+
function actb_penter(){
if (!actb_display) return;
actb_display = 0;
@@ -227,11 +269,13 @@
actb_curr.value = a;
actb_removedisp();
}
-function actb_removedisp(){
- actb_display = 0;
+function actb_removedisp(sndr){
+ if (mouse_on_list == 0 || sndr.value == '') {
+ actb_display = false;
if (document.getElementById('tat_table')) document.body.removeChild(document.getElementById('tat_table'));
if (actb_toid) clearTimeout(actb_toid);
}
+}
function actb_checkkey(evt){
a = evt.keyCode;
if (a == 38){ // up key
@@ -262,8 +306,10 @@
if (!sndr) var sndr = evt.srcElement;
actb_curr = sndr;
+ field_size = sndr.offsetWidth;
+
if (sndr.value == ''){
- actb_removedisp();
+ actb_removedisp(sndr);
return;
}
var t = escape(sndr.value);
@@ -277,7 +323,7 @@
actb_tomake = false;
for (i=0;i<actb_keywords.length;i++){
actb_bool[i] = false;
- if (re.test(actb_keywords[i])){
+ if (re.test(escape(actb_keywords[i]))){
actb_total++;
actb_bool[i] = true;
if (actb_pre == i) actb_tomake = true;
Files actb_old/arrowDown.gif and actb_new/arrowDown.gif differ
Files actb_old/arrowUp.gif and actb_new/arrowUp.gif differ
|
|
|
|
|
Very nice script. When do you think you'll be incorporating the changes? I'm very interested in mouse support in addition to the existing 'Enter' key.
|
|
|
|
|
Hi:
Great control. Maybe this is a form design issue, but ENTER to select the item from the list submits the form (even though there are several more fields I'd like them to submit).
Any tips on preventing this?
Thanks.
|
|
|
|
|
Never mind, I found a solution here.
http://www.dynamicdrive.com/dynamicindex16/disableenter.htm
This code handles the ENTER key on forms. I've added it to your JS and it works great (moves focus to next field on enter). Might be good to incorporate into your code... or not.
TJ
|
|
|
|
|
The Autocomplete works well.
What about the mouse support on this
|
|
|
|
|
i apply, this would be very nice!
|
|
|
|
|
Hi zichun, thanks for all your hard work in writing this great control!
I'm trying to write an app which will allow users to enter multiple words (seperated by spaces) into one text box, with the autocomplete working on each word. At the moment your app only works for the first word in the text box. Sort of like in Gmail, where you can add another email address after the first one has auto-completed. Any idea how this could be done?
JD
|
|
|
|
|
yes, this would be very nice
|
|
|
|
|
I´ve got the first version of this widget and tried to do some "stuff" on it... One of this changes was the support for multiple autocomplete, based on a separator to split the tokens into the text box... I´m sending de code below... hope it helps someone...
BTW: GREAT code, was the most complete i´ve found in the net... Thx!!!
Daniel Wolff (aka Bijur)
"A Native American elder once described his own inner struggles in
this manner: Inside of me there are two dogs. One of the dogs is mean
and evil. The other dog is good. The mean dog fights the good dog all
the time. When asked which dog wins, he reflected for a moment and
replied, The one I feed the most." (George Bernard Shaw)
-------CUT HERE----------
/* ---- Variables ---- */
var _separador = ","; // _separador.
var temp_evt = null;
var actb_timeOut = -1; // Autocomplete Timeout in ms (-1: autocomplete never time out)
var actb_lim = 8; // Number of elements autocomplete can show (-1: no limit)
var actb_firstText = false; // should the auto complete be limited to the beginning of keyword?
var actb_mouse = true; // Enable Mouse Support
/* ---- Variables ---- */
/* --- Styles --- */
var actb_bgColor = '#FFFFFF';
var actb_textColor = '#333333';
var actb_hColor = '#F0F0F0';
var actb_fFamily = 'Verdana';
var actb_fSize = '11px';
var actb_hStyle = 'text-decoration:underline;font-weight="bold"';
/* --- Styles --- */
/* ---- Constants ---- */
var actb_keywords = new Array();
var actb_display = false;
var actb_pos = 0;
var actb_total = 0;
var actb_curr = null;
var actb_rangeu = 0;
var actb_ranged = 0;
var actb_bool = new Array();
var actb_pre = 0;
var actb_toid;
var actb_tomake = false;
var actb_getpre = "";
var actb_mouse_on_list = false;
/* ---- Constants ---- */
function actb_parse(n){
var t = getToken(actb_curr.value, _separador);
t = t.replace("'", "\'");
t = t.replace('"', '\"');
var tobuild = '';
var i;
if (actb_firstText){
var re = new RegExp("^" + t, "i");
}else{
var re = new RegExp(t, "i");
}
var p = n.search(re);
for (i=0;i<p;i++){
tobuild += n.substr(i,1);
}
tobuild += "<font style='"+(actb_hStyle)+"'>"
for (i=p;i<t.length+p;i++){
tobuild += n.substr(i,1);
}
tobuild += "</font>";
for (i=t.length+p;i<n.length;i++){
tobuild += n.substr(i,1);
}
return tobuild;
}
function curTop(){
actb_toreturn = 0;
obj = actb_curr;
while(obj){
actb_toreturn += obj.offsetTop;
obj = obj.offsetParent;
}
return actb_toreturn;
}
function curLeft(){
actb_toreturn = 0;
obj = actb_curr;
while(obj){
actb_toreturn += obj.offsetLeft;
obj = obj.offsetParent;
}
return actb_toreturn;
}
function actb_generate(actb_bool){
if (document.getElementById('tat_table')) document.body.removeChild(document.getElementById('tat_table'));
a = document.createElement('table');
a.cellSpacing='3px';
a.cellPadding='2px';
a.style.borderStyle = 'solid';
a.style.borderWidth = '1px';
a.style.borderColor = '#333333';
a.style.cursor = 'pointer';
a.style.position='absolute';
a.style.top = eval(curTop() + actb_curr.offsetHeight) + "px";
a.style.left = curLeft() + "px";
a.style.backgroundColor=actb_bgColor;
a.id = 'tat_table';
if (actb_mouse){
a.onmouseover = actb_table_focus;
a.onmouseout= actb_table_unfocus;
}
document.body.appendChild(a);
var i;
var first = true;
var j = 1;
var counter = 0;
for (i=0;i<actb_keywords.length;i++){
if (actb_bool[i]){
counter++;
r = a.insertRow(-1);
if (first && !actb_tomake){
r.style.backgroundColor = actb_hColor;
first = false;
actb_pos = counter;
}else if(actb_pre == i){
r.style.backgroundColor = actb_hColor;
first = false;
actb_pos = counter;
}else{
r.style.backgroundColor = actb_bgColor;
}
r.id = 'tat_tr'+(j);
c = r.insertCell(-1);
c.style.color = actb_textColor;
c.style.fontFamily = actb_fFamily;
c.style.fontSize = actb_fSize;
c.innerHTML = actb_parse(actb_keywords[i]);
c.mouseover = "alert()";
c.id = 'tat_td'+(j);
if (actb_mouse) c.onclick=actb_mouseclick;
j++;
}
if (j - 1 == actb_lim && j < actb_total){
r = a.insertRow(-1);
r.style.backgroundColor = actb_bgColor;
c = r.insertCell(-1);
c.style.color = actb_textColor;
c.style.fontFamily = 'arial narrow';
c.style.fontSize = actb_fSize;
c.align='center';
c.innerHTML = '\\/';
if (actb_mouse){
c.onclick = actb_mouse_down;
}
break;
}
}
actb_rangeu = 1;
actb_ranged = j-1;
actb_display = true;
if (actb_pos <= 0) actb_pos = 1;
}
function actb_remake(){
document.body.removeChild(document.getElementById('tat_table'));
a = document.createElement('table');
a.cellSpacing='3px';
a.cellPadding='2px';
a.style.borderStyle = 'solid';
a.style.borderWidth = '1px';
a.style.borderColor = '#333333';
a.style.cursor = 'pointer';
a.style.position='absolute';
a.style.top = eval(curTop() + actb_curr.offsetHeight) + "px";
a.style.left = curLeft() + "px";
a.style.backgroundColor=actb_bgColor;
a.id = 'tat_table';
if (actb_mouse){
a.onmouseover = actb_table_focus;
a.onmouseout= actb_table_unfocus;
}
document.body.appendChild(a);
var i;
var first = true;
var j = 1;
if (actb_rangeu > 1){
r = a.insertRow(-1);
r.style.backgroundColor = actb_bgColor;
c = r.insertCell(-1);
c.style.color = actb_textColor;
c.style.fontFamily = 'arial narrow';
c.style.fontSize = actb_fSize;
c.align='center';
c.innerHTML = '/\\';
if (actb_mouse){
c.onclick = actb_mouse_up;
}
}
for (i=0;i<actb_keywords.length;i++){
if (actb_bool[i]){
if (j >= actb_rangeu && j <= actb_ranged){
r = a.insertRow(-1);
r.style.backgroundColor = actb_bgColor;
r.id = 'tat_tr'+(j);
c = r.insertCell(-1);
c.style.color = actb_textColor;
c.style.fontFamily = actb_fFamily;
c.style.fontSize = actb_fSize;
c.innerHTML = actb_parse(actb_keywords[i]);
c.id = 'tat_td'+(j);
if (actb_mouse) c.onclick=actb_mouseclick;
j++;
}else{
j++;
}
}
if (j > actb_ranged) break;
}
if (j-1 < actb_total){
r = a.insertRow(-1);
r.style.backgroundColor = actb_bgColor;
c = r.insertCell(-1);
c.style.color = actb_textColor;
c.style.fontFamily = 'arial narrow';
c.style.fontSize = actb_fSize;
c.align='center';
c.innerHTML = '\\/';
if (actb_mouse){
c.onclick = actb_mouse_down;
}
}
}
function actb_goup(){
if (!actb_display) return;
if (actb_pos == 1) return;
if (document.getElementById('tat_tr'+actb_pos))
document.getElementById('tat_tr'+actb_pos).style.backgroundColor = actb_bgColor;
actb_pos--;
if (actb_pos < actb_rangeu) actb_moveup();
if (document.getElementById('tat_tr'+actb_pos))
document.getElementById('tat_tr'+actb_pos).style.backgroundColor = actb_hColor;
if (actb_toid) clearTimeout(actb_toid);
if (actb_timeOut > 0) actb_toid = setTimeout("actb_removedisp()",actb_timeOut);
}
function actb_godown(){
if (!actb_display) return;
if (actb_pos == actb_total) return;
if (document.getElementById('tat_tr'+actb_pos))
document.getElementById('tat_tr'+actb_pos).style.backgroundColor = actb_bgColor;
actb_pos++;
if (actb_pos > actb_ranged) actb_movedown();
if (document.getElementById('tat_tr'+actb_pos))
document.getElementById('tat_tr'+actb_pos).style.backgroundColor = actb_hColor;
if (actb_toid) clearTimeout(actb_toid);
if (actb_timeOut > 0) actb_toid = setTimeout("actb_removedisp()",actb_timeOut);
}
function actb_movedown(){
actb_rangeu++;
actb_ranged++;
actb_remake();
}
function actb_moveup(){
actb_rangeu--;
actb_ranged--;
actb_remake();
}
function actb_mclick(n){
if (!actb_display) return;
actb_display = 0;
var word = '';
var c = 0;
for (var i=0;i<=actb_keywords.length;i++){
if (actb_bool[i]) c++;
if (c == n){
word = actb_keywords[i];
break;
}
}
a = word;//actb_keywords[actb_pos-1];//document.getElementById('tat_td'+actb_pos).;
actb_curr.value = addToken(actb_curr.value, a);
actb_removedisp();
}
/* Mouse */
function actb_mouse_down(){
document.getElementById('tat_tr'+actb_pos).style.backgroundColor = actb_bgColor;
actb_pos++;
actb_movedown();
document.getElementById('tat_tr'+actb_pos).style.backgroundColor = actb_hColor;
actb_curr.focus();
actb_moue_on_list = 0;
if (actb_toid) clearTimeout(actb_toid);
if (actb_timeOut > 0) actb_toid = setTimeout("actb_removedisp()",actb_timeOut);
}
function actb_mouse_up(){
document.getElementById('tat_tr'+actb_pos).style.backgroundColor = actb_bgColor;
actb_pos--;
actb_moveup();
document.getElementById('tat_tr'+actb_pos).style.backgroundColor = actb_hColor;
actb_curr.focus();
actb_moue_on_list = 0;
if (actb_toid) clearTimeout(actb_toid);
if (actb_timeOut > 0) actb_toid = setTimeout("actb_removedisp()",actb_timeOut);
}
function actb_mouseclick(){
if (!actb_display) return;
actb_mouse_on_list = 0;
actb_display = 0;
actb_curr.value = addToken(actb_curr.value, this.innerHTML.replace(/<[^>]+>/g,""));
actb_removedisp();
actb_curr.focus();
}
function actb_table_focus(){
actb_mouse_on_list = 1;
}
function actb_table_unfocus(){
actb_mouse_on_list = 0;
if (actb_toid) clearTimeout(actb_toid);
if (actb_timeOut > 0) actb_toid = setTimeout("actb_removedisp()",actb_timeOut);
}
/* ---- */
function actb_penter()
{
if (!actb_display)
return;
actb_display = 0;
var word = '';
var c = 0;
for (var i=0;i<=actb_keywords.length;i++){
if (actb_bool[i]) c++;
if (c == actb_pos){
word = actb_keywords[i];
break;
}
}
a = word;//actb_keywords[actb_pos-1];//document.getElementById('tat_td'+actb_pos).;
//actb_curr.value = a;
actb_pos = 0;
actb_curr.value = addToken(actb_curr.value, a);
actb_removedisp();
}
function addToken(destino, valor)
{
pos = destino.lastIndexOf(_separador + ' ');
if (pos <=0)
return valor + _separador + ' ';
else
{
temp_dest = destino.substr(0, destino.lastIndexOf(_separador + ' ') + 2);
return temp_dest + valor + _separador + ' ';
}
}
function actb_removedisp(){
if (!actb_mouse_on_list) {
actb_display = 0;
if (document.getElementById('tat_table')) document.body.removeChild(document.getElementById('tat_table'));
if (actb_toid) clearTimeout(actb_toid);
}
}
function actb_checkkey(evt){
a = evt.keyCode;
if (a == 38){ // up key
actb_goup();
}else if(a == 40){ // down key
actb_godown();
}else if(a == 13){
actb_penter();
}
}
function actb_tocomplete(sndr,evt,arr, separador){
if (separador)
_separador = separador;
else
_separador = ";";
if (arr) actb_keywords = arr;
if (!sndr) var sndr = evt.srcElement;
actb_curr = sndr;
if (evt.keyCode == 38 || evt.keyCode == 40 || evt.keyCode == 13) return;
var i;
var word = 0;
var c = 0;
for (var i=0;i<=actb_keywords.length;i++){
if (actb_bool[i]) c++;
if (c == actb_pos){
word = i;
break;
}
}
actb_pre = word;//actb_pos;
var t = sndr.value.replace("'","\'");
t = t.replace('"','\"');
t = getToken(t, _separador);
if (actb_firstText){
var re = new RegExp("^" + t, "i");
}else{
var re = new RegExp(t, "i");
}
actb_total = 0;
actb_tomake = false;
for (i=0;i<actb_keywords.length;i++){
actb_bool[i] = false;
if (re.test(actb_keywords[i])){
actb_total++;
actb_bool[i] = true;
if (actb_pre == i) actb_tomake = true;
}
}
if (actb_toid) clearTimeout(actb_toid);
if (actb_timeOut > 0) actb_toid = setTimeout("actb_removedisp()",actb_timeOut);
actb_generate(actb_bool);
}
function getToken(valor, _separador)
{
sep = _separador + ' ';
if (valor.lastIndexOf(sep) > 0)
return valor.substr((valor.lastIndexOf(sep)+2));
else
return valor;
}
-------CUT HERE----------
|
|
|
|
|
I like your code. But I found one problem.
If the array contains groups of words, for example:
"Manchester United", "Chelsea FC", "FC Porto"
with spaces, when you type the text in the text box and get to the space character, the find does not work any more.
How can i fix it in the code?
Thanks.
Miguel Vieira
|
|
|
|
|
Well,
I have managed to write a solution for the code to find the space character and other special ones.
Here are the changes:
1) At the function actb_tocomplete, go to the line if (re.test((actb_keywords[i])){ and change it to if (re.test(escape(actb_keywords[i]))){
2) At the functions actb_remake() and actb_generate() find the line c.innerHTML = actb_parse(actb_keywords[i]); and change it to c.innerHTML = actb_parse(escape(actb_keywords[i]));
3) Finally, at the function actb_parse(n), change the line return tobuild; to return unescape(tobuild);
Basically, all that I did was to escape (encode) all the text for the code to find everything and, then, unescape (unencode) it just before displaying it.
I think that's all. Please, let me know if it didn't work because I could have forgotten something...
(just updated: I already found a bug with this... Working on it...)
|
|
|
|
|
Cool stuff. Do you think it is possible to catch ALT-DOWN key to open the autocomplete list so it would behave similar to a drop down list?
Regards, Markus
|
|
|
|
|
The autocomplete is perfect for me except when i use drop down box. The DIV layer comes under the drop down box, any work around ?
thanks
|
|
|
|
|