How to use array in autocomplete textbox jquery?

Question

For Example

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>
    $(function() { 
        var availableTags = [ "ActionScript", "AppleScript", "Asp"];
        var availableTagsCode = ["1", "2", "3"]; 
        $( "#tags" ).autocomplete({ source: availableTags });
    });
</script>

<input id="tags" name="name">
<input id="tags_code" name="code">

Actually, I have tried to change code while select suggestion using following code:

$("#tags_code").val(availableTagsCode); 

I need to select suggestion test if i will select 0th array from tag the 0th code should assign to name="code" textbox.
Please help me to resolve this problem.

Solution 1

You can define a select event handler:

$( "#tags" ).autocomplete({ 
    source: availableTags,
    select: function(event, ui) {
        var index = availableTags.indexOf(ui.item.value);
        $("#tags_code").val(availableTagsCode[index]);  
    }
});

Here is the working JSFiddle demo.

Actually, jQuery UI allows you to use an array of objects with value and label properties when you provide source.
So, something like this will work and look better:

var tags = [
    {"label": "ActionScript", "value": 1},
    {"label": "AppleScript", "value": 2},
    {"label": "Asp", "value": 3}
];

$( "#tags" ).autocomplete({ 
    source: tags,
    select: function (event, ui) {
        $("#tags_code").val(ui.item.value);  
    }
});

JSFiddle demo for the second approach.

If you don't want the value to be replaced after choosing, you can use custom property instead of value:

var tags = [
    {"label": "ActionScript", "code": 1},
    {"label": "AppleScript", "code": 2},
    {"label": "Asp", "code": 3}
];

$( "#tags" ).autocomplete({ 
    source: tags,
    select: function (event, ui) {
        $("#tags_code").val(ui.item.code);  
    }
});

JSFiddle demo.

Solution 2

Set select event handler

$(function() {
  var availableTags = ["ActionScript", "AppleScript", "Asp"];
  var availableTagsCode = ["1", "2", "3"];
  $("#tags").autocomplete({
    source: availableTags,
    select: function(e, ui) {
      $('#tags_code').val(availableTagsCode[availableTags.indexOf(ui.item.value)]);
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input id="tags" name="name">
<input id="tags_code" name="code">