related autocomplete fields

Question

I am trying to have two text boxes autocomplete and populate one another. This is the code I have so far and I am stuck at this point.

<script type="text/javascript" language="javascript" src="scripts/jquery-latest.js">  </script>
<script type="text/javascript" language="javascript" src="scripts/jquery.ui.js"></script>
<script type="text/javascript">
$().ready(function() {
$('#compName').keyup(function() {
    var txtSrch = $(this).val();
    if ( txtSrch && txtSrch.length > 2 ) {
        formData = 'vw=getCompany&compID=0&compName=' + txtSrch;
        // alert(formData); 
        $.ajax({ 
            url: 'output.cfm',
            data: formData,
            type: "post",
            cache: false,
            success: function(result) {
                $('#result').html(result);
            },
            error: function(xmlHttpRequest, status, err) {
                confirm('Error!' + err );
            }
        });
    }
});
});
</script>
<div style="width:400px; padding:20px;">
     <p>Company Selection</p>
     <label for="compID">Company ID:</label><br/>
    <input type="text" name="compID" id="compID" value="" />
    <br/>
    <label for="compName">Company Name:</label><br/>
    <input type="text" name="compName" id="compName" value="" />
    <div id="sel-comp" style="clear:both;"></div>
    <input type="submit" name="submit" id="submit" value="Submit">
     <div id="result"></div>
</div>

The output.cfm has:

<script>
var  compName = [{"id":"1000","name":"company1|CO|80401-8077|1000"},{"id":"1005","name":"company2|CO|80308-2291|1005"},{"id":"1010","name":"company3|CO|80202-1450|1010"},{"id":"1015","name":"company4|CO|80206-0109|1015"},{"id":"1020","name":"company5|CO|80003-6638|1020"}];

$('##compName').autocomplete({
source: compName
});
</script>

If someone enters Company ID 100, I would like to give these options 1000, 1005, 1010, 1015 and 1020 for autocomplete. Once selected, I would like to populate the company name with the corresponding company name for that id and vice versa. The name string includes the company name, state, zip code and company id seperated with "|".

Any ideas? Thanks in advance.

Answer 1

Your working code jsfiddle. Refer it.

   <div style="width:400px; padding:20px;">
        <p>Company Selection</p>
        <label for="compID">Company ID:</label><br/>
        <input type="text" name="compID" id="compID" value="" />
        <br/>
        <label for="compName">Company Name:</label><br/>
        <input type="text" name="compName" id="compName" value="" />
        <div id="sel-comp" style="clear:both;"></div>
        <input type="submit" name="submit" id="submit" value="Submit">
        <div id="result"></div>
    </div>

  $(function() {

    var compName = [{"id":"1000","value":"company1|CO|80401-8077|1000"},{"id":"1005","value":"company2|CO|80308-2291|1005"},{"id":"1010","value":"company3|CO|80202-1450|1010"},{"id":"1015","value":"company4|CO|80206-0109|1015"},{"id":"1020","value":"company5|CO|80003-6638|1020"}];            
    var source  = [ ];
    var mapping = { };
    for(var i = 0; i <compName .length; ++i) {
        source.push(compName [i].id);
        mapping[compName[i].id] = compName[i].value;
    }    
    $("#compID").autocomplete({
        source: source,
        minLength: 1,
        select: function(event, ui) {  
            $("#compName").val(mapping[ui.item.value]); 
        } 
    });
});