:: Forum >> Version 2 >>

Autocomplete or lookup editor in grid?


Does the grid support autocomplete in a cell of the grid?

That is, I would like to be able type "sab" in a cell and when I type the third char the grid makes a call to the server, my code matches the "sab" string to records in the database, and then a dropdown appears under the appropriate cell with list of matching records.

Is there an online example of this? I search the forum but did not see this specific feature.

Thanks for any tips or pointers,

Scott
ScottN
Friday, August 25, 2006
I used to mix some features to do it.
But you can make your own simplifyed/complex version.
Just insert a call to the server ajax/asp/vbs ... code inside the SearchFunction.
HTH
<script
var 
lastcol
var 
lastrow
var 
isanyddvisible false
var 
lastTopPos
var 
lastLeftPos;
var 
DDCELLCLICKED false;
////-------------------------------------------------------//// 

var objAC = new AW.UI.Grid;
objAC.setCellData(function(colrow){return col "." row }); 
objAC.setHeaderText("header"); 
objAC.setStyle("width"'130');
objAC.setStyle("height"'100%');
objAC.setVirtualMode(false); 
objAC.setCellEditable(false); 
objAC.getRowsTemplate().setStyle('background''lightyellow');
objAC.setColumnCount(1); 
objAC.setRowCount(140);
////-------------------------------------------------------////
 
objAC.onCellClicked         = function(eventcolumnrow){ 
DDCELLCLICKED true;
obj.onCellClicked();
obj.setCellText(this.getCellText(column,row), lastcol,lastrow);
obj.getCellTemplate(lastcol,lastrow).refresh();
}
////-------------------------------------------------------////
var objtextarea = new AW.HTML.DIV;  
objtextarea.setStyle("height""180"); 
objtextarea.setStyle("POSITION""ABSOLUTE"); 
objtextarea.setStyle("Z-INDEX""1000000000");
objtextarea.setStyle("display""none") ;
objtextarea.setContent("text"objAC.toString()); 
document.write(objtextarea); 
////-------------------------------------------------------////

var obj = new AW.UI.Grid;
obj.setCellData(function(colrow){return col "." row}); 
obj.setHeaderText("header"); 
obj.setVirtualMode(false); 
obj.setCellEditable(true); 
obj.setColumnCount(6); 
obj.setRowCount(10); 
////-------------------------------------------------------////
  /////// SCROLL-TOP CHANGED (ENABLE / DISABLE VERT.-SCROLL )////////////// 
obj.onScrollTopChanged = function(top){  
 if(
isanyddvisible){ if (top != lastTopPos){ return "obj.setScrollTop(lastTopPos)" } } 
  } 
 
obj.onScrollTopError = function(error){  eval(error);  }  
////-------------------------------------------------------////
  /////// SCROLL-LEFT CHANGED (ENABLE / DISABLE HORIZ.-SCROLL )///////
obj.onScrollLeftChanged = function(left){  
 if(
isanyddvisible){ if (left != lastLeftPos){ return "obj.setScrollLeft(lastLeftPos)" } } 
  } 
 
obj.onScrollLeftError = function(error){  eval(error);  }  
 
////-------------------------------------------------------////

obj.onCellClicked         = function(eventcolumnrow){  
if( 
isanyddvisible ) {
objtextarea.setStyle("display""none") ;     /// hide drop-down object 
isanyddvisible false
obj.setScrollToplastTopPos );
obj.setScrollLeftlastLeftPos );


////-------------------------------------------------------////

obj.onCellTextChanged    = function(eventcolumnrow){ 
if( !
DDCELLCLICKED  ) {
SearchFunctioncolumn,row);
objAC.getRowsTemplate().refresh();
}
}
////-------------------------------------------------------//// 

obj.onCellEditStarted         = function(eventcolumnrow){  

/// retaint scroll pos 
lastTopPos obj.getScrollTop(); 
lastLeftPos obj.getScrollLeft(); 

isanyddvisible true

/// postion the drop-down object below cell  
var el obj.getCellTemplate(columnrow).element(); 

if(!
AW.ie) { 
objtextarea.setStyle("left"AW.getLeft(el) - obj.getScrollLeft() );  
objtextarea.setStyle("top"AW.getTop(el) - obj.getScrollTop() + el.offsetHeight ); 

else{ 
objtextarea.setStyle("left"AW.getLeft(el) - );  
objtextarea.setStyle("top"AW.getTop(el) - el.offsetHeight  ); 


objtextarea.setStyle("display""block") ;
objAC.raiseEvent("adjustScrollHeight");  ///////////  PATCH  //////
objAC.refresh();               ///////  PATCH  ///////

lastcol=column
lastrow=row

SearchFunctionlastcol,lastrow);

////-------------------------------------------------------//// 

 
function SearchFunction(col,row){
 
 
objAC.setRowCount) ;
objtextarea.setStyle("height""29");
objAC.setHeaderText('Loading...' ,0);
objAC.refresh();

   
  var 
tosearch obj.getCellText(colrow).toUpperCase();
 var 
rows = [], max 140;
 if(
tosearch.length 3){ 
 
objAC.setHeaderText('3 chars min' ,0);
objAC.refresh();
}
else{ 
if(
tosearch != '' ){
    for (var 
i=0i<maxi++){ 
    var 
cellval objAC.getCellText(0i);

if ( 
cellval.toUpperCase().substr(0tosearch.length) == tosearch.substr(0tosearch.length) ) {
rows.push(i);
    } 
 }
}
  
setTimeout( function(){  ////*********/// SET TIMEOUT
   
rows.length 0 ?  objAC.setRowCountrows.length ) : objAC.setRowCount() ;
   
   if(
rows.length == 0){
   
objtextarea.setStyle("height""29");
   
objAC.setHeaderText('No Matches',0);
   }
else{
   
objtextarea.setStyle("height""180");
objAC.setHeaderText('Found::'+rows.length ,0);
}
objAC.setRowIndices(rows);
objAC.setScrollTop(0);
 },
100);                ////*********//// END TIMEOUT
 
}
 }
////-------------------------------------------------------////
document.write(obj); 
</
script>  
Carlos
Sunday, August 27, 2006

Thanks for the response, Carlos.

That is quite a bit of information and I am new to Active Widgets.

I do not quite understand why there are two grid widgets here, and I also do not understand how the rows variable gets set. Somehow it should get (XML?) data from the server, but I do not know where to tie it in. In other autocomplete toolkits I have used there is a lookup handler URL that you specify. Is there one here?

Also, does anyone know if there is a simple example of autocomplete (maybe w/o the grid) using the ActiveWidgets library?

Thanks for any tips or pointers,

Scott
ScottN
Monday, August 28, 2006

Ok, I figured out what the code is doing. I have it working in my prototype, but I was hoping to have the autocomplete box part of the cell. That is, in the example code above I would like to be able to type "0.1" in a cell, then press the down arrow twice to select the 0.11 entry.

Right now you cannot use the arrows, you must take your hands off the keyboard and select what you want with the mouse.

Anyone know of a way to get the autocomplete in the cell?

Thanks
ScottN
Tuesday, August 29, 2006
You can override default key events with the following code.

note1: dont forget to reset zz variable to '-1' at the end of onCellEditStarted function.
note2 : I used 'End' key to grab the cell because 'Enter' key is trapped by cell-edition.

But I can't find a fix to:
1- does not scroll the drop-down grid when using arrow-down key.
2- when up-arrow-key is used the cursor moves back one position inside the edited cell.

Already fixed :
The cell maintain it's edition status when (mouse)scrolling or sort the dd-grid.
I will try to make a complete example
var zz = -1;
 
var 
defaultEventHandler obj.getEvent("onkeydown");  
 
obj.setEvent("onkeydown", function(e){ 
 if( 
isanyddvisible ) {
var 
ind objAC.getRowIndices();

 if(
e.keyCode==40){ 
 if(
zz objAC.getRowIndices().length 1zz++;
 var 
ind2 ind[zz];
 
  
objAC.setCurrentRow([ind2] ); 
  
objAC.setSelectedRows( [ind2] ); 
         
e.returnValue false;
 }  
  if(
e.keyCode==38){ 
 if(
zz 0zz--;
  var 
ind2 ind[zz];
  
    
objAC.setCurrentRow([ind2] );
   
objAC.setSelectedRows([ind2] ); 
         
e.returnValue false;
 }  
 
  if(
e.keyCode==35){ //// End Key
  
ACIITEMSELECTED true;

objtextarea.setStyle("display""none") ;     /// hide drop-down object 
obj.setScrollToplastTopPos );
obj.setScrollLeftlastLeftPos );

isanyddvisible false;

obj.onCellTextChanged = function(){}
 
obj.setCellText(objAC.getCellText(0,objAC.getSelectedRows( [ind2] ) ),lastcol,lastrow );
obj.getCellTemplate(lastcol,lastrow).refresh();
   
e.returnValue false;
 }  
 }
 else{ 
 
defaultEventHandler.call(thise);  
 
e.returnValue false;  
 } 

 } ); 
 
Carlos
Wednesday, August 30, 2006
Replace the variable name ACIITEMSELECTED ... with ..DDCELLCLICKED
Wednesday, August 30, 2006
oooops
I should say ... dont forget to reset zz variable to '-1' at the begining of SearchFunction .
Carlos
Wednesday, August 30, 2006



This topic is archived.

Back to support forum

Forum search