Tema: [autocomplete] autoseleccionar el primero (autoSelecFirst)
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 29/09/2010, 13:11
Avatar de SirDuque
SirDuque
 
Fecha de Ingreso: febrero-2009
Ubicación: Paso del Rey, Buenos Aires, Argentina
Mensajes: 975
Antigüedad: 15 años, 2 meses
Puntos: 89
[autocomplete] autoseleccionar el primero (autoSelecFirst)
Hola tengo un autocomplete. Los codigos no son mios, lo tome de internet.
Necesito que autoselecione el primero, para que al apretar enter seleccione la primera opcion y no envie el FORM.

Estos son los codigos:

Buscador:

Código HTML: 
Ver original
  1. <HEAD>
  2. <script type="text/javascript" src="arabc/ajax_framework.js"></script>
  3. <style type="text/css">
  4. #search-wrap input{width:400px; font-size:16px; color:#999999; padding:6px; border:solid 1px #999999;}
  5. #results{width:260px; border:solid 1px #DEDEDE; display:none;}
  6. #results ul, #results li{padding:0; margin:0; border:0; list-style:none;}
  7. #results li {border-top:solid 1px #DEDEDE;}
  8. #results li a{display:block; padding:4px; text-decoration:none; color:#000000; font-weight:bold;}
  9. #results li a small{display:block; text-decoration:none; color:#999999; font-weight:normal;}
  10. #results li a:hover{background:#FFFFCC;}
  11. #results ul {padding:6px;}
  12. </style>
  13. </HEAD>
  14. <BODY>
  15. <div id="search-wrap">
  16. <h1>
  17. <input name="search-q" id="search-q" type="text" onKeyUp="javascript:autosuggest()" onKeyEnter=""/>
  18. </h1>
  19. <div id="results"></div>
  20. </div>
  21. </BODY>

search.php
Código PHP: 
Ver original
  1. <meta http-equiv="Content-type" content="text/html; charset=latin1" />
  2. <?php 
  3.     include('config.php'); 
  4.     $SQL_FROM = 'ar_abc';  
  5.     $SQL_WHERE = 'AR_CODIGO';  
  6.     $SQL_OR = 'AR_DESCRI';  
  7.  
  8. ?>
  9. <?php 
  10.     $searchq        =   strip_tags($_GET['q']);
  11.     $getRecord_sql  =   'SELECT * FROM '.$SQL_FROM.' WHERE '.$SQL_WHERE.' LIKE "%'.$searchq.'%" OR '.$SQL_OR.' LIKE "%'.$searchq.'%"';
  12.     $getRecord      =   mysql_query($getRecord_sql);
  13.     if(strlen($searchq)>0){
  14.     echo '<ul>';
  15.     while ($row = mysql_fetch_array($getRecord)) {?><li><a href="#" onClick="fill('<?php echo htmlentities($row['AR_CODIGO']);?>');return false;"><?php echo htmlentities($row['AR_DESCRI']);?><small>CODIGO: <?php echo htmlentities($row['AR_CODIGO']); ?></small></a></li>
  16.     <?php } 
  17.     echo '</ul>';
  18.     ?>
  19. <?php } ?>
ajax_framework.js

Código Javascript: 
Ver original
  1. function createObject() {
  2.     var request_type;
  3.     var browser = navigator.appName;
  4.     if(browser == "Microsoft Internet Explorer"){
  5.     request_type = new ActiveXObject("Microsoft.XMLHTTP");
  6.     }else{
  7.         request_type = new XMLHttpRequest();
  8.     }
  9.         return request_type;
  10. }
  11.  
  12. var http = createObject();
  13. function autosuggest() {
  14. q = document.getElementById('search-q').value;
  15. nocache = Math.random();
  16. http.open('get', 'arabc/search.php?q='+q+'&nocache = '+nocache);
  17. http.onreadystatechange = autosuggestReply;
  18. http.send(null);
  19. }
  20. function autosuggestReply() {
  21. if(http.readyState == 4){
  22.     var response = http.responseText;
  23.     e = document.getElementById('results');
  24.     if(response!=""){
  25.         e.innerHTML=response;
  26.         e.style.display="block";
  27.     } else {
  28.         e.style.display="none";
  29.     }
  30. }
  31. }
  32. function clearsuggest() { 
  33. e = document.getElementById('results'); 
  34. e.style.display="none"; 
  35. } 
  36. function fill(i) {
  37. e = document.getElementById('search-q');
  38. e.value=i;
  39. document.getElementById('results').style.display="none";
  40. }

Gracias por leerlo