How to use jQueryUI autocomplete widget with label:value pairs?

The statement below is found in the documentation for the jQueryUI autocomplete widget.  I want to provide local data as an array of objects so that when the user selects from a list of program titles (labels) that a corresponding database key (value) is returned.

Can someone provide a simple example of this?  I've tried many variation but am obviously not understanding something.  I believe all I need is a simple example with static loading of array variables in order to move forward.  Thanks.

From documentation: "The local data can be a simple Array of Strings, or it contains Objects for each item in the array, with either a label or value property or both. The label property is displayed in the suggestion menu. The value will be inserted into the input element after the user selected something from the menu."
ttheimerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

StealthyDevCommented:
You can take a look at this:

http://docs.jquery.com/Plugins/Autocomplete
0
StealthyDevCommented:
Hi, in that example, they are trying to explain that the values in the below are populated as the autocomplete:

var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");

If you want it to look more clear, you can use like this also:
var data =new Array("Core","Selectors","Senthur Pandian");
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
  <script>
  $(document).ready(function(){
    var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
    $("#example").autocomplete(data);
  });
  </script>
  
</head>
<body>
  API Reference: <input id="example" /> (try "C" or "E")
</body>
</html>

Open in new window

0
remorinaCommented:
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ttheimerAuthor Commented:
I hadn't found this tutorial.  It was outstanding in that it was easy to follow and gave two examples of working with the data source.  This example also showed how to place the result which is what I needed.
0
ttheimerAuthor Commented:
In case it helps others the following code is a self contained example (except for the jQuery references) which is simplified from the tutorial link provided by remorina with the following changes
 - The data source is coded into the example (this is over-simplification but help my understanding)
 - A second value, related to the selected label, is available for use elsewhere.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Autocomplete for Tags</title> 
  <script src="../../scripts/jquery.js"></script>
  <script src="../../scripts/jquerylib/jquery.ui.core.min.js"></script>
  <script src="../../scripts/jquerylib/jquery.ui.widget.min.js"></script>
  <script src="../../scripts/jquerylib/jquery.ui.position.min.js"></script> 
  <script src="../../scripts/jquerylib/jquery.ui.autocomplete.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../scripts/jquerylib/jquery-ui-1.8.custom_mod.css" /> 
    <script type="text/javascript">
    testSource = new Array({"label":"Cardiology","tagkey":"1"},{"label":"Ultrasound","tagkey":"2"},{"label":"Cardio-Pulmonary","tagkey":"3"},{"label":"Weight loss","tagkey":"4"},{"label":"Nutrition","tagkey":"5"},{"label":"International","tagkey":"6"},{"label":"Skeletal","tagkey":"7"},{"label":"Infection control","tagkey":"8"},{"label":"Water","tagkey":"9"},{"label":"Drinking water","tagkey":"10"});
    $(function() {  
        var myTagKey = ''; 
        $("#tags").autocomplete({
            source: testSource,
            select: function(event, ui) {
                    myTagKey = ui.item.tagkey; 
                    $("#foundtagkey").val(myTagKey);
            }
        });
    });
    </script>
</head>
<body>
    
<div class="demo">

<div>
    <label for="tags">Tags: </label>
    <input id="tags" />
    <label for="foundtagkey" style="margin-left: 4em;">Tag key:</label>
    <input id="foundtagkey" />
</div>

</div><!-- End demo -->

<div class="demo-description">
<p>

</p>
<p>
The datasource is a simple JavaScript array, provided to the widget using the source-option.
</p>
</div><!-- End demo-description -->

</body>
</html>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

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.