Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Autocompletar con AJAX

Estas en el tema de Autocompletar con AJAX en el foro de Frameworks JS en Foros del Web. Hola: Soy totalmente nueva en el tema de ajax, encontre un codigo de autocompletar que me esta funcionando muy bien, busca el nombre y el ...
  #1 (permalink)  
Antiguo 13/09/2008, 15:02
 
Fecha de Ingreso: mayo-2007
Mensajes: 23
Antigüedad: 17 años
Puntos: 0
Pregunta Autocompletar con AJAX

Hola: Soy totalmente nueva en el tema de ajax, encontre un codigo de autocompletar que me esta funcionando muy bien, busca el nombre y el codigo del articulo, me coloca el codigo en el campo correcto, pero adicionalmente debo traer el dato de serial y valor a sus respectivos campos de texto y no tengo idea de como hacerlo, arreglar el codigo, de antemano doy las gracias por su colaboracion:
el archivo ajax:

var ajaxBox_offsetX = 0;
var ajaxBox_offsetY = 0;
var ajax_list_externalFile = 'ajax-list-countries.php'; // Path to external file
var minimumLettersBeforeLookup = 1; // Number of letters entered before a lookup is performed.

var ajax_list_objects = new Array();
var ajax_list_cachedLists = new Array();
var ajax_list_activeInput = false;
var ajax_list_activeItem;
var ajax_list_optionDivFirstItem = false;
var ajax_list_currentLetters = new Array();
var ajax_optionDiv = false;
var ajax_optionDiv_iframe = false;

var ajax_list_MSIE = false;
if(navigator.userAgent.indexOf('MSIE')>=0 && navigator.userAgent.indexOf('IE 7')<0)ajax_list_MSIE=true;

var currentListIndex = 0;

function ajax_getTopPos(inputObj)
{

var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null){
returnValue += inputObj.offsetTop;
}
return returnValue;
}
function ajax_list_cancelEvent()
{
return false;
}

function ajax_getLeftPos(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;

return returnValue;
}

function ajax_option_setValue(e,inputObj)
{
if(!inputObj)inputObj=this;
var tmpValue = inputObj.innerHTML;
if(ajax_list_MSIE)tmpValue = inputObj.innerText;else tmpValue = inputObj.textContent;
if(!tmpValue)tmpValue = inputObj.innerHTML;
ajax_list_activeInput.value = tmpValue;
if(document.getElementById(ajax_list_activeInput.n ame + '_hidden'))document.getElementById(ajax_list_activ eInput.name + '_hidden').value = inputObj.id;
ajax_options_hide();
}

function ajax_options_hide()
{
if(ajax_optionDiv)ajax_optionDiv.style.display='no ne';
if(ajax_optionDiv_iframe)ajax_optionDiv_iframe.sty le.display='none';
}

function ajax_options_rollOverActiveItem(item,fromKeyBoard)
{
if(ajax_list_activeItem)ajax_list_activeItem.class Name='optionDiv';
item.className='optionDivSelected';
ajax_list_activeItem = item;

if(fromKeyBoard){
if(ajax_list_activeItem.offsetTop>ajax_optionDiv.o ffsetHeight){
ajax_optionDiv.scrollTop = ajax_list_activeItem.offsetTop - ajax_optionDiv.offsetHeight + ajax_list_activeItem.offsetHeight + 2 ;
}
if(ajax_list_activeItem.offsetTop<ajax_optionDiv.s crollTop)
{
ajax_optionDiv.scrollTop = 0;
}
}
}

function ajax_option_list_buildList(letters,paramToExternal File)
{

ajax_optionDiv.innerHTML = '';
ajax_list_activeItem = false;
if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length<=1){
ajax_options_hide();
return;
}

ajax_list_optionDivFirstItem = false;
var optionsAdded = false;
for(var no=0;no<ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length;no++){
if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()][no].length==0)continue;
optionsAdded = true;
var div = document.createElement('DIV');
var items = ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()][no].split(/###/gi);
if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length==1 && ajax_list_activeInput.value == items[0]){
ajax_options_hide();
return; }

div.innerHTML = items[items.length-1];
div.id = items[0];

div.className='optionDiv';
div.onmouseover = function(){ ajax_options_rollOverActiveItem(this,false) }
div.onclick = ajax_option_setValue;
if(!ajax_list_optionDivFirstItem)ajax_list_optionD ivFirstItem = div;
ajax_optionDiv.appendChild(div);
}
if(optionsAdded){
ajax_optionDiv.style.display='block';
if(ajax_optionDiv_iframe)ajax_optionDiv_iframe.sty le.display='';
ajax_options_rollOverActiveItem(ajax_list_optionDi vFirstItem,true);
}

}

function ajax_option_list_showContent(ajaxIndex,inputObj,pa ramToExternalFile,whichIndex)
{
if(whichIndex!=currentListIndex)return;
var letters = inputObj.value;
var content = ajax_list_objects[ajaxIndex].response;
var elements = content.split('|');
ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()] = elements;
ajax_option_list_buildList(letters,paramToExternal File);

}

function ajax_option_resize(inputObj)
{
ajax_optionDiv.style.top = (ajax_getTopPos(inputObj) + inputObj.offsetHeight + ajaxBox_offsetY) + 'px';
ajax_optionDiv.style.left = (ajax_getLeftPos(inputObj) + ajaxBox_offsetX) + 'px';
if(ajax_optionDiv_iframe){
ajax_optionDiv_iframe.style.left = ajax_optionDiv.style.left;
ajax_optionDiv_iframe.style.top = ajax_optionDiv.style.top;
}

}

function ajax_showOptions(inputObj,paramToExternalFile,e)
{
if(e.keyCode==13 || e.keyCode==9)return;
if(ajax_list_currentLetters[inputObj.name]==inputObj.value)return;
if(!ajax_list_cachedLists[paramToExternalFile])ajax_list_cachedLists[paramToExternalFile] = new Array();
ajax_list_currentLetters[inputObj.name] = inputObj.value;
if(!ajax_optionDiv){
ajax_optionDiv = document.createElement('DIV');
ajax_optionDiv.id = 'ajax_listOfOptions';
document.body.appendChild(ajax_optionDiv);

if(ajax_list_MSIE){
ajax_optionDiv_iframe = document.createElement('IFRAME');
ajax_optionDiv_iframe.border='0';
ajax_optionDiv_iframe.style.width = ajax_optionDiv.clientWidth + 'px';
ajax_optionDiv_iframe.style.height = ajax_optionDiv.clientHeight + 'px';
ajax_optionDiv_iframe.id = 'ajax_listOfOptions_iframe';

document.body.appendChild(ajax_optionDiv_iframe);
}

var allInputs = document.getElementsByTagName('INPUT');
for(var no=0;no<allInputs.length;no++){
if(!allInputs[no].onkeyup)allInputs[no].onfocus = ajax_options_hide;
}
var allSelects = document.getElementsByTagName('SELECT');
for(var no=0;no<allSelects.length;no++){
allSelects[no].onfocus = ajax_options_hide;
}

var oldonkeydown=document.body.onkeydown;
if(typeof oldonkeydown!='function'){
document.body.onkeydown=ajax_option_keyNavigation;
}else{
document.body.onkeydown=function(){
oldonkeydown();
ajax_option_keyNavigation() ;}
}
var oldonresize=document.body.onresize;
if(typeof oldonresize!='function'){
document.body.onresize=function() {ajax_option_resize(inputObj); };
}else{
document.body.onresize=function(){oldonresize();
ajax_option_resize(inputObj) ;}
}

}

if(inputObj.value.length<minimumLettersBeforeLooku p){
ajax_options_hide();
return;
}


ajax_optionDiv.style.top = (ajax_getTopPos(inputObj) + inputObj.offsetHeight + ajaxBox_offsetY) + 'px';
ajax_optionDiv.style.left = (ajax_getLeftPos(inputObj) + ajaxBox_offsetX) + 'px';
if(ajax_optionDiv_iframe){
ajax_optionDiv_iframe.style.left = ajax_optionDiv.style.left;
ajax_optionDiv_iframe.style.top = ajax_optionDiv.style.top;
}

ajax_list_activeInput = inputObj;
ajax_optionDiv.onselectstart = ajax_list_cancelEvent;
currentListIndex++;
if(ajax_list_cachedLists[paramToExternalFile][inputObj.value.toLowerCase()]){
ajax_option_list_buildList(inputObj.value,paramToE xternalFile,currentListIndex);
}else{
var tmpIndex=currentListIndex/1;
ajax_optionDiv.innerHTML = '';
var ajaxIndex = ajax_list_objects.length;
ajax_list_objects[ajaxIndex] = new sack();
var url = ajax_list_externalFile + '?' + paramToExternalFile + '=1&letters=' + inputObj.value.replace(" ","+");
ajax_list_objects[ajaxIndex].requestFile = url; // Specifying which file to get
ajax_list_objects[ajaxIndex].onCompletion = function(){ ajax_option_list_showContent(ajaxIndex,inputObj,pa ramToExternalFile,tmpIndex); }; // Specify function that will be executed after file has been found
ajax_list_objects[ajaxIndex].runAJAX();
}
}

function ajax_option_keyNavigation(e)
{
if(document.all)e = event;

if(!ajax_optionDiv)return;
if(ajax_optionDiv.style.display=='none')return;

if(e.keyCode==38){
if(!ajax_list_activeItem)return;
if(ajax_list_activeItem && !ajax_list_activeItem.previousSibling)return;
ajax_options_rollOverActiveItem(ajax_list_activeIt em.previousSibling,true);
}

if(e.keyCode==40){
if(!ajax_list_activeItem){
ajax_options_rollOverActiveItem(ajax_list_optionDi vFirstItem,true);
}else{
if(!ajax_list_activeItem.nextSibling)return;
ajax_options_rollOverActiveItem(ajax_list_activeIt em.nextSibling,true);
}
}

if(e.keyCode==13 || e.keyCode==9){ if(ajax_list_activeItem && ajax_list_activeItem.className=='optionDivSelected ')ajax_option_setValue(false,ajax_list_activeItem) ;
if(e.keyCode==13)return false; else return true;
}
if(e.keyCode==27){ ajax_options_hide();
}
}


document.documentElement.onclick = autoHideList;

function autoHideList(e)
{
if(document.all)e = event;

if (e.target) source = e.target;
else if (e.srcElement) source = e.srcElement;
if (source.nodeType == 3)
source = source.parentNode;
if(source.tagName.toLowerCase()!='input' && source.tagName.toLowerCase()!='textarea')ajax_opti ons_hide();

}
  #2 (permalink)  
Antiguo 13/09/2008, 15:05
 
Fecha de Ingreso: mayo-2007
Mensajes: 23
Antigüedad: 17 años
Puntos: 0
Respuesta: Se puede hacer con AJAX?? Ayudita por favor

y este es el codigo de la consulta en php:

<?
include('../../dbconnect.inc.php');

if(isset($_GET['getCountriesByLetters']) && isset($_GET['letters'])){
$letters = $_GET['letters'];
$letters = preg_replace("/[^a-z0-9 ]/si","",$letters);
$res = mysql_query("select concat(id,' - ',titulo) as articulo, id from articulo where (titulo like '%".$letters."%') or (id like '".$letters."%') ") or die(mysql_error());
#echo "1###select ID,countryName from ajax_countries where countryName like '".$letters."%'|";
while($inf = mysql_fetch_array($res)){
echo $inf["id"]."###".$inf["articulo"]."|";
}
}
?>

y el formulario donde veo el autocompletar y donde necesito llevar los datos del serial y el valor:
<form name="formu" action="guardafact.php" method="get"><tr>
<td class="celda">Ayuda</td><td class="celda" width="110">
<p align="center">Articulo</td><td class="celda" width="" align="center">Seriales</td>
<td class="celda" width="69">Cantidad</td><td class="celda" width="107">Vr Unidad</td></tr>
<tr><td>
<p align="center"><input type="button" value="?" name="sizewindow" onclick="SizeWin()">
</td><td class="texto" width="" align="center" valign="middle">
<input type="text" id="articulo" name="articulo" value="" onkeyup="ajax_showOptions(this,'getCountriesByLett ers',event)" size="56">
<input type="hidden" id="articulo_hidden" name="id_art">
<input type="hidden" name="dato" value='<? echo $dato;?>'>
<input type="hidden" name="fecha" value='<? echo $fecha;?>'>
<input type="hidden" name="id_fact" value='<? echo $id_fact;?>' size="6"></td>
<td class="texto" width="">
<p align="center">
<input type="text" name="serial" style="font-size: 10px" size="6" ></td>
<td class="texto" width="69"><input type="text" name="cant" style="font-size: 10px" size="6" ></td>
<td class="texto" width="107"><input type="text" name="valor" style="font-size: 10px" size="19" ></td>
<td width="68"><input type="submit" value="Agregar" name="submit" style="font-family: Verdana; font-size: 10px">
</td></tr></form>
  #3 (permalink)  
Antiguo 19/09/2008, 19:58
 
Fecha de Ingreso: mayo-2007
Mensajes: 23
Antigüedad: 17 años
Puntos: 0
Respuesta: Autocompletar con AJAX

Ya encontre la solucion :
var ajaxBox_offsetX = 0;
var ajaxBox_offsetY = 0;
var ajax_list_externalFile = 'ajax-list-countries.php';
var minimumLettersBeforeLookup = 1;
var ajax_list_objects = new Array();
var ajax_list_cachedLists = new Array();
var ajax_list_activeInput = false;
//var ajax_list_activeInput1 = false;
var ajax_list_activeItem;
var ajax_list_optionDivFirstItem = false;
var ajax_list_optionDivValorItem = false;
var ajax_list_currentLetters = new Array();
var ajax_optionDiv = false;
var ajax_optionDiv_iframe = false;
var ajax_list_MSIE = false;
if(navigator.userAgent.indexOf('MSIE')>=0 && navigator.userAgent.indexOf('IE 7')<0)ajax_list_MSIE=true;

var currentListIndex = 0;

function ajax_getTopPos(inputObj)
{

var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null){
returnValue += inputObj.offsetTop;
}
return returnValue;
}
function ajax_list_cancelEvent()
{
return false;
}

function ajax_getLeftPos(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;

return returnValue;
}

function ajax_option_setValue(e,inputObj)
{
if(!inputObj)inputObj=this;
var tmpValue = inputObj.innerHTML;
if(ajax_list_MSIE)tmpValue = inputObj.innerText;else tmpValue = inputObj.textContent;
if(!tmpValue)tmpValue = inputObj.innerHTML;
ajax_list_activeInput.value = tmpValue;
//ajax_list_activeInput1.value = tmpValue;
if(document.getElementById(ajax_list_activeInput.n ame + '_hidden'))document.getElementById(ajax_list_activ eInput.name + '_valor').value = inputObj.valor; document.getElementById(ajax_list_activeInput.name + '_hidden').value = inputObj.id;
ajax_options_hide();
}

function ajax_options_hide()
{
if(ajax_optionDiv)ajax_optionDiv.style.display='no ne';
if(ajax_optionDiv_iframe)ajax_optionDiv_iframe.sty le.display='none';
}
function ajax_options_rollOverActiveItem(item,fromKeyBoard)
{
if(ajax_list_activeItem)ajax_list_activeItem.class Name='optionDiv';
item.className='optionDivSelected';
ajax_list_activeItem = item;

if(fromKeyBoard){
if(ajax_list_activeItem.offsetTop>ajax_optionDiv.o ffsetHeight){
ajax_optionDiv.scrollTop = ajax_list_activeItem.offsetTop - ajax_optionDiv.offsetHeight + ajax_list_activeItem.offsetHeight + 2 ;
}
if(ajax_list_activeItem.offsetTop<ajax_optionDiv.s crollTop)
{
ajax_optionDiv.scrollTop = 0;
}
}
}

function ajax_option_list_buildList(letters,paramToExternal File)
{

ajax_optionDiv.innerHTML = '';
ajax_list_activeItem = false;
if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length<=1){
ajax_options_hide();
return;
}



ajax_list_optionDivFirstItem = false;
//ajax_list_optionDivValorItem = false;
var optionsAdded = false;
for(var no=0;no<ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length;no++){
if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()][no].length==0)continue;
optionsAdded = true;
var div = document.createElement('DIV');
var items = ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()][no].split("###");
if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length==1 && ajax_list_activeInput.value == items[0]){
ajax_options_hide();
return;
}

div.innerHTML = items[items.length-1];
div.id = items[0];
div.valor = items[1];
div.className='optionDiv';
div.onmouseover = function(){ ajax_options_rollOverActiveItem(this,false) }
div.onclick = ajax_option_setValue;
if(!ajax_list_optionDivFirstItem)ajax_list_optionD ivFirstItem = div;
//ajax_list_optionDivValorItem = div.valor;
ajax_optionDiv.appendChild(div);

}
if(optionsAdded){
ajax_optionDiv.style.display='block';
if(ajax_optionDiv_iframe)ajax_optionDiv_iframe.sty le.display='';
ajax_options_rollOverActiveItem(ajax_list_optionDi vFirstItem,true);
//ajax_options_rollOverActiveItem(ajax_list_optionDi vValorItem,true);

}

}

function ajax_option_list_showContent(ajaxIndex,inputObj,pa ramToExternalFile,whichIndex)
{
if(whichIndex!=currentListIndex)return;
var letters = inputObj.value;
var content = ajax_list_objects[ajaxIndex].response;
var elements = content.split('|');
ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()] = elements;
ajax_option_list_buildList(letters,paramToExternal File);
}

function ajax_option_resize(inputObj)
{
ajax_optionDiv.style.top = (ajax_getTopPos(inputObj) + inputObj.offsetHeight + ajaxBox_offsetY) + 'px';
ajax_optionDiv.style.left = (ajax_getLeftPos(inputObj) + ajaxBox_offsetX) + 'px';
if(ajax_optionDiv_iframe){
ajax_optionDiv_iframe.style.left = ajax_optionDiv.style.left;
ajax_optionDiv_iframe.style.top = ajax_optionDiv.style.top;
}

}

function ajax_showOptions(inputObj,paramToExternalFile,e)
{
if(e.keyCode==13 || e.keyCode==9)return;
if(ajax_list_currentLetters[inputObj.name]==inputObj.value)return;
if(!ajax_list_cachedLists[paramToExternalFile])ajax_list_cachedLists[paramToExternalFile] = new Array();
ajax_list_currentLetters[inputObj.name] = inputObj.value;
if(!ajax_optionDiv){
ajax_optionDiv = document.createElement('DIV');
ajax_optionDiv.id = 'ajax_listOfOptions';
//ajax_optionDiv.valor = 'ajax_listOfOptions';
document.body.appendChild(ajax_optionDiv);

if(ajax_list_MSIE){
ajax_optionDiv_iframe = document.createElement('IFRAME');
ajax_optionDiv_iframe.border='0';
ajax_optionDiv_iframe.style.width = ajax_optionDiv.clientWidth + 'px';
ajax_optionDiv_iframe.style.height = ajax_optionDiv.clientHeight + 'px';
ajax_optionDiv_iframe.id = 'ajax_listOfOptions_iframe';

document.body.appendChild(ajax_optionDiv_iframe);
}

var allInputs = document.getElementsByTagName('INPUT');
for(var no=0;no<allInputs.length;no++){
if(!allInputs[no].onkeyup)allInputs[no].onfocus = ajax_options_hide;
}
var allSelects = document.getElementsByTagName('SELECT');
for(var no=0;no<allSelects.length;no++){
allSelects[no].onfocus = ajax_options_hide;
}

var oldonkeydown=document.body.onkeydown;
if(typeof oldonkeydown!='function'){
document.body.onkeydown=ajax_option_keyNavigation;
}else{
document.body.onkeydown=function(){
oldonkeydown();
ajax_option_keyNavigation() ;}
}
var oldonresize=document.body.onresize;
if(typeof oldonresize!='function'){
document.body.onresize=function() {ajax_option_resize(inputObj); };
}else{
document.body.onresize=function(){oldonresize();
ajax_option_resize(inputObj) ;}
}

}

if(inputObj.value.length<minimumLettersBeforeLooku p){
ajax_options_hide();
return;
}


ajax_optionDiv.style.top = (ajax_getTopPos(inputObj) + inputObj.offsetHeight + ajaxBox_offsetY) + 'px';
ajax_optionDiv.style.left = (ajax_getLeftPos(inputObj) + ajaxBox_offsetX) + 'px';
if(ajax_optionDiv_iframe){
ajax_optionDiv_iframe.style.left = ajax_optionDiv.style.left;
ajax_optionDiv_iframe.style.top = ajax_optionDiv.style.top;
}
ajax_list_activeInput = inputObj;
ajax_optionDiv.onselectstart = ajax_list_cancelEvent;
currentListIndex++;
if(ajax_list_cachedLists[paramToExternalFile][inputObj.value.toLowerCase()]){
ajax_option_list_buildList(inputObj.value,paramToE xternalFile,currentListIndex);
}else{
var tmpIndex=currentListIndex/1;
ajax_optionDiv.innerHTML = '';
var ajaxIndex = ajax_list_objects.length;
ajax_list_objects[ajaxIndex] = new sack();
var url = ajax_list_externalFile + '?' + paramToExternalFile + '=1&letters=' + inputObj.value.replace(" ","+");
ajax_list_objects[ajaxIndex].requestFile = url;
ajax_list_objects[ajaxIndex].onCompletion = function(){ ajax_option_list_showContent(ajaxIndex,inputObj,pa ramToExternalFile,tmpIndex); };
ajax_list_objects[ajaxIndex].runAJAX();
}
}

function ajax_option_keyNavigation(e)
{
if(document.all)e = event;
if(!ajax_optionDiv)return;
if(ajax_optionDiv.style.display=='none')return;
if(e.keyCode==38){ // Up arrow
if(!ajax_list_activeItem)return;
if(ajax_list_activeItem && !ajax_list_activeItem.previousSibling)return;
ajax_options_rollOverActiveItem(ajax_list_activeIt em.previousSibling,true);
}
if(e.keyCode==40){
if(!ajax_list_activeItem){
ajax_options_rollOverActiveItem(ajax_list_optionDi vFirstItem,true);

}else{
if(!ajax_list_activeItem.nextSibling)return;
ajax_options_rollOverActiveItem(ajax_list_activeIt em.nextSibling,true);
}
}

if(e.keyCode==13 || e.keyCode==9){
if(ajax_list_activeItem && ajax_list_activeItem.className=='optionDivSelected ')ajax_option_setValue(false,ajax_list_activeItem) ;
if(e.keyCode==13)return false; else return true;
}
if(e.keyCode==27){
ajax_options_hide();
}
}


document.documentElement.onclick = autoHideList;

function autoHideList(e)
{
if(document.all)e = event;

if (e.target) source = e.target;
else if (e.srcElement) source = e.srcElement;
if (source.nodeType == 3)
source = source.parentNode;
if(source.tagName.toLowerCase()!='input' && source.tagName.toLowerCase()!='textarea')ajax_opti ons_hide();

}
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:27.