Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

jquery ui autocomplete index of the item i selected

Posted on 2017-11-14
2
Medium Priority
?
29 Views
Last Modified: 2017-11-15
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.
0
Comment
Question by:maqskywalker
2 Comments
 
LVL 54

Accepted Solution

by:
Ryan Chong earned 2000 total points
ID: 42368518
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
 
LVL 1

Author Closing Comment

by:maqskywalker
ID: 42369132
thanks
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

782 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question