CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-autocomplete
James5949
James5949

Reputation: 147

Traversing to the first value in a list in Jquery Autocomplete

I'm trying to refer to the value in a list using jQuery to traverse through the divs to get the value.

I have tried so many different ways including .get(), .find() and .children().

I'm using jQuery autocomplete plugin so I can't add the code here! However I have a screenshot attached.

Note: I believe that I need to refer to the ui-menu-item-wrapper something like ui-menu-item-wrapper[0] rather than the ui-id-2 or tabindex.

How do I get the value in the of the first item in the list?

enter image description here

Edit: Figured out how to copy the code!

<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>

Upvotes: 0

Views: 660

Answers (3)

Mark Schultheiss
Mark Schultheiss

Reputation: 34178

Just to answer directly, the menu items get created and destroyed often, so you have to get the first one when it has some. The menu item is created when the autocomplete is created, but the items inside are what changes.

SO, given that, we can find them in an event for instance the "open" event so we can then select the first one from that. Here, I show the text of the first item in the menu in a console.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" />

Upvotes: 2

Steve0
Steve0

Reputation: 2253

A div in html doesn't generally have a value, I am going to assume you know the text [or part of it] that you are searching for.

I have provided 3 examples in the snippet below;

  1. The first is getting the menu item by ui-id
  2. The second is getting the menu item by a subset of the content.
  3. Always get the nth menu item note that the first index is 1 as opposed to zero

// 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>

Upvotes: 0

Eitan G
Eitan G

Reputation: 146

Find the element with a class of .ui-menu-item-wrapper that is a child of a li with the class of .ui-menu-item.

$(li.ui-menu-item .ui-menu-item-wrapper')

Upvotes: 0

Related Questions