Me preguntaba si puede enviar el enfoque a un li dinámico. Esto es lo que estoy tratando de hacer:

Tengo un cuadro de búsqueda que tiene una función de teclado vinculada donde busca los nombres de las personas. Los resultados aparecen en un div justo debajo del cuadro de búsqueda con un ul de resultados. Tenía la esperanza de que si alguien presiona el botón de flecha hacia abajo, el enfoque cambia al primer elemento de ul. Algo así como funciona un menú desplegable. Aquí está el código (no puse todo el CSS, por lo que no se ve tan bonito como debería, solo para su información)

$(document).ready(function(){
  $('#search_name').keyup(function(e) {
		if(e.which == 40){
			//It does get here, and does find the li, BUT doesn't send the focus
			$('#search_results').find('li:first').focus();
			return ;
		}
        //This is the function that displays the UL in #search_results
	     /*delay_call(function(){
	    	searchNameDept();
	    }, 500 ); */
	});
});
#search{
  position: relative;
  right:0;
  margin:0 1em;
  width:350px;
}
#search{
  top:0;
  z-index:10;
}
#search_name{
  
  display:block;
  padding:10px 50px 10px 10px;
  border:0;
  margin:0;
}
#search > a{
  position: absolute;
  right:0;
  top:0;
  bottom:0;
  padding:0 10px;
  background-color: #ec9507;
}
#search > a i{
  color:#fff;
}
#search_results{
  position: absolute;
  top:100%;
  left: 0;
  right:0;
  max-height: 200px;
  overflow: auto;
}
#search_results ul{
  width: 100%;
  margin:0;
  padding:0;
}
#search_results li{
  width: 100%;
  list-style-type: none;
  box-sizing: border-box;
  margin:0;
  padding:10px 15px;
  background-color: #fff;
  border-top:1px solid #ccc;
  transition:all 0.5s;
  -moz-transition:all 0.5s;
  -webkit-transition:all 0.5s;
  cursor:pointer;
  word-wrap:break-word;
}
#search_results li:hover, #search_results li:focus{
  color:#fff;
  background-color: #27c7f4;
}
#search_results li i{
  padding-right:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form action="#" method="post" class="boxy" id="search">
  <input type="text" name="search_name" id="search_name" class="boxy" value="DIRECTORY" autocomplete="off" />
  <a href="javascript:void(0)" class="center_flex">Search</a>
  <div id="search_results">
    <!-- Example content that is printed out after searchNameDept() is run -->
    <ul>
      <li class="search_org">Sally Joe</li>
    </ul>
  </div>
</form>

He intentado $ ('# search_results'). Find ('li: first'). Focus (), $ ('# search_results'). Find ('li: first'). Trigger ('focus'). Nada funciona. ¿Alguien tiene algún comentario?

2
cbloss793 30 ene. 2016 a las 00:11

3 respuestas

La mejor respuesta

Solo necesitas jugar con CSS & amp; algo de jquery aquí. aquí está tu violín. https://jsfiddle.net/7h0pavzb/ necesita agregar una clase para mostrar que está seleccionada.

Tu jquery

$(document).ready(function(){
  $('#search_name').keyup(function(e) {
        if(e.which == 40){
            if($("#search_results li.active").length!=0) {
                var storeTarget = $('#search_results').find("li.active").next();
                $("#search_results li.active").removeClass("active");
                storeTarget.focus().addClass("active");
            }
            else {
                $('#search_results').find("li:first").focus().addClass("active");
            }
            return ;
        }
    });
});

Y el estilo lo que añado es,

#search_results li.active { background:#000; color:#fff; }

Aquí hay otro violín para la tecla de flecha hacia arriba y hacia abajo. https://jsfiddle.net/7h0pavzb/1/

3
ameenulla0007 29 ene. 2016 a las 21:38

Solo prueba la siguiente solución.

Espero que ayude.

	$('#productname').keydown(function(e) {
  var key = e.which;
  if (key == 38 || key == 40) {
var storeTarget = "";

if (e.which == 40) {
  if ($("ul#suggestion-list li.active").length != 0) {
    storeTarget = $('#ul#suggestion-list').find("li.active").next();
    $("ul#suggestion-list li.active").removeClass("active");
    storeTarget.focus().addClass("active");
  } else {
    $('ul#suggestion-list').find("li:first").focus().addClass("active");
  }
  return;
}
  }
});
<div id="addproduct">
  <table>
<tr>
  <td>Product Name:</td>
  <td>
    <input type="text" name="" id="productname" placeholder="Product Name" size="40" />
  </td>
  <td> Quantity </td>
  <td>
    <input type="text" name="quantity" id="quantity" placeholder="QTY" size="3" />
  </td>
  <td>
    <input type="button" id="add" value="Add" />
  </td>
</tr>
<tr>
  <td></td>
  <td>
    <ul id="suggestion-list"></ul>
  </td>
  <td></td>
  <td></td>
  <td></td>
</tr>
  </table>
</div>
0
Al-Mothafar 14 ene. 2017 a las 10:53

Consultando la documentación de jQuery .focus ()

El evento de enfoque se envía a un elemento cuando gana el enfoque. Este evento es implícitamente aplicable a un conjunto limitado de elementos, como la forma elementos (<input>, <select>, etc.) y enlaces (<a href>). En versiones recientes del navegador, el evento se puede ampliar para incluir todos tipos de elementos estableciendo explícitamente la propiedad tabindex del elemento. Un elemento puede enfocarse mediante comandos de teclado, como la tecla Tab, o haciendo clic con el mouse en el elemento.

Así que simplemente agregue el atributo tabindex="10" a sus etiquetas <li> para que puedan enfocarse. O también puede envolver el contenido de LI en <a href="#"></a>, ya que los enlaces son elementos enfocables.

Otra forma de lograr este resultado sería simplemente agregando una clase a su etiqueta <li> "enfocada".

0
mjorissen 29 ene. 2016 a las 21:28