Hola gente! Estoy tratando de implementar un buscador en ajax, del tipo autosuggest. Este script lo que hace es pasar por GET la palabra ingresada en el campo TEXT y su ID (esto lo toma y lo muestra desde la BDD)
El form que utilizo para el buscador es este:
Código HTML:
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/ajax-dynamic-list.js"></script>
<div id="mainContainer">
<div id="formContent">
<form>
<table border="0">
<tr>
<td></td>
<td><input type="text" id="name" name="name" onkeyup="ajax_showOptions(this,'GETnombre',event)">
<input type="hidden" id="name_hidden" name="idrubro">
<input type="submit" value="Enviar">
<!-- THE ID OF the country will be inserted into this hidden input --></td>
</tr>
</table>
</form>
</div>
</div>
Acá está la consulta a la bdd:
Código PHP:
$conn = mysql_connect("localhost","xxx","xxx");
mysql_select_db("xxx",$conn);
if(isset($_GET['GETnombre']) && isset($_GET['letters'])){
$letters = $_GET['letters'];
$letters = preg_replace("/[^a-z0-9 ]/si","",$letters);
$res = mysql_query("SELECT id_rubro,rubro,nombre FROM restaurantes WHERE nombre 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_rubro"]."###".$inf["nombre"]."|";
}
}
Hasta el momento, logré pasar por GET solo la variable idrubro y el link quedaría de esta forma:
buscador.php?name=CASAN&idrubro=19
Pero necesito que me pase otra variable más de la base de datos que es el rubro para que quede de esta forma:
buscador.php?name=CASAN&idrubro=19&rubro=1. Esto lo necesito porque el
rubro y el
id_rubro los utilizo en un sistema de contador y ranking.
La modificación que habría que hacer está en este archivo de ajax, pero no tengo la menor idea de como modificarlo, aunque creo saber donde está el tema. Les muestro una parte del código:
ajax-dynamic-list.js
Código:
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<minimumLettersBeforeLookup){
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,paramToExternalFile,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,paramToExternalFile,tmpIndex); }; // Specify function that will be executed after file has been found
ajax_list_objects[ajaxIndex].runAJAX(); // Execute AJAX function
}
Esta es una parte pero donde está la flecha muestra como pasa por GET los parámetros.
Lo que quisiera pedirles es si me pueden decir cómo hay que hacer para agregarle alguna línea más para que pueda pasar la otra variable que necesito para terminar esta consulta.
Si lo necesitan, les posteo el codigo completo del js.
Desde ya, les agradezco un monton su ayuda.
Saludos cordiales. Marx.