:: Forum >>

The new autocomplete combo box by Guillermo Murillo

<!--
1.- Type the text to find into the input of combo control
2.- Clic the option to select it
-->

<html>
<head>
<script type="text/javascript" src="js/runtime/lib/aw.js"></script>
<link type="text/css" rel="stylesheet" href="js/runtime/styles/vista/aw.css"></link>
</head>
<body bgcolor="white" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" link="#0000FF" vlink="#0000FF" alink="#0000FF" onload="javascript:carga_informacion();">
<xml id="data">
<datos>
<dato>
<id>1</id>
<item>Oracle</item>
</dato>
<dato>
<id>2</id>
<item>Microsoft</item>
</dato>
<dato>
<id>3</id>
<item>Microware</item>
</dato>
<dato>
<id>4</id>
<item>Apple</item>
</dato>
</datos>
</xml>
<table style="position:absolute; top:30px; left:0px; width:100%; height:95%; margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; border:0px; cursor:default;">
<tr height="5%" valign="top">
<td width="100%" align="left">
<div id="lista" style="position:relative; top:0px; left:0px; top:0px; width:100%; height:100%;">
<script type="text/javascript">
var tbDatosComboObj = new AW.XML.Table;
tbDatosComboObj.setXML(document.getElementById("data"));

var lblReceptorObj = new AW.UI.Label;
lblReceptorObj.setId("lblReceptorObj");
lblReceptorObj.setPosition(10,0);
lblReceptorObj.setSize(200,24);
lblReceptorObj.setControlText("Receptor :");
lblReceptorObj.setClass("item","text-tfvNormal");
document.write(lblReceptorObj);

var cmbReceptorObj = new AW.UI.Combo;
cmbReceptorObj.setId("cmbReceptorObj");
cmbReceptorObj.setPosition(100,0);
cmbReceptorObj.setSize(300,24);
cmbReceptorObj.getContent("box/text").setAttribute("readOnly", true);
cmbReceptorObj.onSelectedItemsChanged = function(index)
{
if(index != -1)
{
var findText = cmbReceptorObj.getItemText(index);
var findValue = cmbReceptorObj.getItemValue(index);

if( findText != "" )
{
txtSearchObj.setControlText(findText);
cmbReceptorObj.setItemValue(findValue);
cmbReceptorObj.setItemText(findText);
cmbReceptorObj.setItemCount(1);
}
}
};

cmbReceptorObj.onItemClicked = function(event, index)
{
cmbReceptorObj.element().focus();
};
document.write(cmbReceptorObj);

var txtSearchObj = new AW.UI.Input;
txtSearchObj.setId("txtSearchObj");
txtSearchObj.setPosition(100,0);
txtSearchObj.setSize(280,24);
txtSearchObj.setEvent("onkeyup", function(event) { autoCompleteCombo(event); } );
txtSearchObj.onControlMouseUp = function (event)
{
cmbReceptorObj.showPopup();
}
document.write(txtSearchObj);
</script>
</div>
</td>
</tr>
<tr height="30%" valign="top">
<td width="70%" align="left">
<div id="lista" style="position:relative; top:0px; left:0px; top:0px; width:100%; height:100%;">
<script type="text/javascript">

function carga_informacion()
{
cargar(cmbReceptorObj, tbDatosComboObj);
}

function find(datos, obj)
{
var patt = new RegExp(obj.toLowerCase() + ".*");
var output = new Array();

output[0] = new Array();
output[1] = new Array();

for(var i=0, j=0; i<datos.getCount(); i++)
{
if ( patt.test(datos.getData(1,i).toLowerCase()) == true)
{
output[0][j] = datos.getData(0, i);
output[1][j] = datos.getData(1, i);
j++;
}
}

return output;
}

function autoCompleteCombo(event)
{
switch (event.keyCode)
{
case 33:
case 34:
case 36:
case 35:
case 13:
case 9:
case 27:
case 16:
case 17:
case 18:
case 20:
case 40:
case 38:
case 37:
case 39:
case 46:
return;
};

var findArray = find(tbDatosComboObj, txtSearchObj.getControlText());

cmbReceptorObj.setControlText(txtSearchObj.getControlText());
cmbReceptorObj.setItemValue(findArray[0]);
cmbReceptorObj.setItemText(findArray[1]);
cmbReceptorObj.setItemCount(findArray[1].length);
cmbReceptorObj.setSelectedItems([-1]);
cmbReceptorObj.showPopup();
}


function cargar(ComboObj, datos)
{
var laClaves = new Array();
var laTextos = new Array();

for ( var liIdx=0 ; liIdx<datos.getCount() ; liIdx++ )
{
laClaves[liIdx] = datos.getData(0,liIdx);
laTextos[liIdx] = datos.getData(1,liIdx);
}

ComboObj.setItemValue(laClaves);
ComboObj.setItemText(laTextos);
ComboObj.setItemCount(liIdx);
}

</script>
</div>
</td>
</tr>
</table>
</body>
</html>
Guillermo Murillo, mmgj24@yahoo.com
Monday, November 5, 2012

This topic is archived.


Back to support forum

Forum search