Desplazamiento a la del primer valor en una lista en jQuery Autocompletar

votos
0

Estoy tratando de hacer referencia al valor en una lista usando jQuery para recorrer a través de los divs para obtener el valor.

He tratado de muchas maneras diferentes, incluyendo .get (), .find (.children) y ().

Estoy usando jQuery plugin de autocompletar así que no puedo añadir el código aquí! Sin embargo, tengo una captura de pantalla adjunta.

Nota: Creo que necesito para referirse al ui-menu-item-wrapperalgo así como ui-menu-item-wrapper[0]lugar de la ui-id-2o tabindex.

¿Cómo puedo obtener el valor en el del primer elemento de la lista?

introducir

Editar: descubierto la manera de copiar el código!

<ul id=ui-id-1 tabindex=0 class=ui-menu ui-widget ui-widget-content ui-autocomplete ui-front style=display: none; width: 746px; position: relative; top: -2465.55px; left: 261.858px; xpath=1>
   <li class=ui-menu-item>
      <div id=ui-id-2 tabindex=-1 class=ui-menu-item-wrapper>French</div>
   </li>
   <li class=ui-menu-item>
      <div id=ui-id-3 tabindex=-1 class=ui-menu-item-wrapper>Mayfair</div>
   </li>
   <li class=ui-menu-item>
      <div id=ui-id-4 tabindex=-1 class=ui-menu-item-wrapper>Fish in a Tie</div>
   </li>
   <li class=ui-menu-item>
      <div id=ui-id-5 tabindex=-1 class=ui-menu-item-wrapper>French Cuisine</div>
   </li>
   <li class=ui-menu-item>
      <div id=ui-id-6 tabindex=-1 class=ui-menu-item-wrapper>Fine Dining</div>
   </li>
</ul>
Publicado el 07/11/2018 a las 22:32
fuente por usuario
En otros idiomas...                            


3 respuestas

votos
2

Sólo para responder directamente, los elementos de menú se crean y destruido a menudo, así que hay que llegar el primero cuando tiene alguna. El elemento de menú se crea cuando se crea la función de autocompletar, pero los elementos en el interior es lo que cambia.

Así que, dado que, los podemos encontrar en un evento, por ejemplo, el evento "abierta" por lo que a continuación, podemos seleccionar el primero de eso. A continuación, se muestra el texto del primer elemento del menú en unaconsole.log(di)

$(function() {
  var mythings = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"];
  var myA = $("#myautomagicautocomplete");
  myA.autocomplete({
    autoFocus: true,
    source: mythings
  });
  var w = myA.autocomplete("widget");
  myA.on("autocompleteopen", function(event, ui) {
      // var w = myA.autocomplete("widget");
      var fi = w.find('.ui-menu-item').first();
      var di = fi.find('.ui-menu-item-wrapper').text();
      console.dir(di);
    });
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<input type="text" id="myautomagicautocomplete" />

Respondida el 08/11/2018 a las 00:45
fuente por usuario

votos
0

Una diven html generalmente no tienen un valor, voy a asumir que usted sabe el texto [o parte de ella] que usted está buscando.

He proporcionado 3 ejemplos en el siguiente fragmento de código;

  1. El primero es conseguir que el elemento de menú ui-id
  2. El segundo es conseguir que el elemento de menú por un subconjunto del contenido.
  3. Siempre obtener el nthelemento de menú nota de que el primer índice es 1 en contraposición a cero

// if you know the ui-id number
var idNum = 6;
//console.log(`#ui-id-${idNum}`);
console.log($(`#ui-id-${idNum}`).text());
// if you know some of the content
var txt = "Fish";
//console.log(`div.ui-menu-item-wrapper:contains(${txt})`);
console.log($(`div.ui-menu-item-wrapper:contains(${txt})`).text());
//always get the nth menu-item
var index = 1;
console.log($(`.ui-menu-item:nth-child(${index}) > div.ui-menu-item-wrapper`).text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" style="display: block; width: 746px; position: relative; top: -2465.55px; left: 261.858px;" xpath="1">
  <li class="ui-menu-item">
    <div id="ui-id-2" tabindex="-1" class="ui-menu-item-wrapper">French</div>
  </li>
  <li class="ui-menu-item">
    <div id="ui-id-3" tabindex="-1" class="ui-menu-item-wrapper">Mayfair</div>
  </li>
  <li class="ui-menu-item">
    <div id="ui-id-4" tabindex="-1" class="ui-menu-item-wrapper">Fish in a Tie</div>
  </li>
  <li class="ui-menu-item">
    <div id="ui-id-5" tabindex="-1" class="ui-menu-item-wrapper">French Cuisine</div>
  </li>
  <li class="ui-menu-item">
    <div id="ui-id-6" tabindex="-1" class="ui-menu-item-wrapper">Fine Dining</div>
  </li>
</ul>

Respondida el 07/11/2018 a las 23:03
fuente por usuario

votos
0

Encontrar el elemento con una clase de .ui-menu-item-wrapperque es un hijo de un licon la clase de .ui-menu-item.

$(li.ui-menu-item .ui-menu-item-wrapper')
Respondida el 07/11/2018 a las 22:37
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more