asked on

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

StealthyDev

You can take a look at this:

http://docs.jquery.com/Plugins/Autocomplete

StealthyDev

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

ASKER CERTIFIED SOLUTION

remorina

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ttheimer

ASKER

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.

ttheimer

ASKER

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