jquery ui autocomplete index of the item i selected

i'm using the jquery ui autocomplete plugin
https://jqueryui.com/autocomplete/

After I select an item from the autocomplete.

I call the selected value value using ui.item.value and the works fine.
For example my autocomplete is show last names:

Johnnson
Smith
Williams

When I select Williams ui.item.value returns Williams .

How do I get the index of the item i selected? Anyone know the syntax

So if I select Williams from the 3 last names that show up i want the index for the 3rd item, which i believ is 2.
LVL 1
maqskywalkerAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Ryan ChongConnect With a Mentor Commented:
How do I get the index of the item i selected? Anyone know the syntax
it can be done, but more like to set an attribute in your item list.

below modified version from an online test site:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            var availableTags = [
                              {label: "ActionScript", index:1},
                              {label: "AppleScript", index:2},
                              {label: "Asp", index:3},
                              {label: "BASIC", index:4},
                              {label: "C", index:5},
                              {label: "C++", index:6},
                              {label: "Clojure", index:7},
                              {label: "COBOL", index:8},
                              {label: "ColdFusion", index:9},
                              {label: "Erlang", index:10},
                              {label: "Fortran", index:11},
                              {label: "Groovy", index:12},
                              {label: "Haskell", index:13},
                              {label: "Java", index:14},
                              {label: "JavaScript", index:15},
                              {label: "Lisp", index:16},
                              {label: "Perl", index:17},
                              {label: "PHP", index:18},
                              {label: "Python", index:19},
                              {label: "Ruby", index:20},
                              {label: "Scala", index:21},
                              {label: "Scheme", index:22},
                            ];
            $("#tags").autocomplete({
                source: availableTags,
                select: function (event, ui) { alert(ui.item.index); }
            });
        });
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 
 
</body>
</html>

Open in new window

0
 
maqskywalkerAuthor Commented:
thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.