jquery ui autocomplete index of the item i selected

maqskywalker used Ask the Experts™
i'm using the jquery ui autocomplete plugin

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:


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.
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Software Team Lead
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">
  <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>
        $(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},
                source: availableTags,
                select: function (event, ui) { alert(ui.item.index); }
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">

Open in new window



Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial