current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

When a user begins typing in the DRMCompanyName input text box, and autocomplete feature fires that displays both the company name and the company id. When the use clicks on a selection, the company name and id are to be placed into the DRMCompanyName text box and the id in the DRMCompanyId text box just below.

When the json results are returned from the controller, the code in the autocomplete ajax success function populates the drop down list by setting the label to be equal to the value (company name) plus the key (company id) being returned. Likewise the value is set to just the key (company id).

When the user selects a particular item, the label is supposed to go in the DRMCompanyName text box and the value in the DRMCompanyId. However, what winds up happening is the value gets placed in both.

I've scoured my code over and over and cannot find out why the label does not get placed in the DRMCompanyName field.

jQuery

$(function () {
    $('#DRMCompanyName').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("compSearchByName", "AgentTransmission")',
                type: 'GET',
                dataType: 'json',
                data: request,
                success: function (data) {
                    response($.map(data, function (value, key) {
                        return {
                            label: value + " " + key,
                            value: key
                        };
                    }));
                },
            });
        },
        minLength: 2,
        select: function (event, ui) {
            console.log(ui);
            $('#DRMCompanyName').val(ui.item.label);
            $('#DRMCompanyName').text(ui.item.label);

            if ($('#DRMCompanyId').text() == '') {
                $('#DRMCompanyId').val(ui.item.value);
                $('#DRMCompanyId').text(ui.item.value);
            }
        }
    });
});

Here is a sample screen shot of the ui item from the select function above (the company name is blacked out for privacy). When I click on this particular item in the autocomplete drop down, 200014 gets placed in both the DRMCompanyName and DRMCompanyId fields.

enter image description here

Razor Markup

    <div class="M-editor-field">
        @Html.TextBoxFor(model => model.DRMCompanyName)
        @Html.ValidationMessageFor(model => model.DRMCompanyName)
    </div>    

    <div class="M-editor-label">
        @Html.LabelFor(model => model.DRMCompanyId)
    </div>
    <div class="M-editor-field">
        @Html.TextBoxFor(model => model.DRMCompanyId, new { maxlength = 10, title = "Start typing company name to activate DRM Company Name lookup. When DRM Company is found, select to fill in DRM Company ID and DRM Company Name fields." })
        @Html.ValidationMessageFor(model => model.DRMCompanyId)
    </div>

EDIT

After following the suggestion in the answer below, I modified the select function like so: 

        select: function (event, ui) {
            console.log(tempResults[ui.item.value]);
            $('#DRMCompanyName').val(tempResults[ui.item.value]);
            $('#DRMCompanyName').text(tempResults[ui.item.value]);

            if ($('#DRMCompanyId').text() == '') {
                $('#DRMCompanyId').val(ui.item.value);
                $('#DRMCompanyId').text(ui.item.value);
            }
        }

Based on the console.log readout, this accesses the correct value when the user clicks on the autocomplete item. However, it still places the value in both text boxes. What I can't understand, when I select Inspect Element, is that the correct value for DRMCompanyName actually is placed in the HTML, however it does not appear on the screen, only the id or value (as opposed to label).

enter image description here

share|improve this question

1 Answer 1

up vote 2 down vote accepted

You are setting label: value + " " + key which will of course add the id in the label.

When you set $('#DRMCompanyName').val(ui.item.label);, it's going to set what you concatenated in the $.map to the value.

One way to do this is to store a temporary result set from the data in the source ajax call to access later. With this temp set, you can now pull any object or key/value from it for use later.

When getting results, store a temporary list of the results.

var tempResults = [];

...
source: function (request, response) {
    $.ajax({
        url: '@Url.Action("compSearchByName", "AgentTransmission")',
        type: 'GET',
        dataType: 'json',
        data: request,
        success: function (data) {
            tempResults = data;

            response($.map(data, function (value, key) {
                return {
                    label: value + " " + key,
                    value: key
                };
            }));
        },
    });
}

Then, on the select, you can now access the stored data and set values:

select: function (event, ui) {
    event.preventDefault();
    var name = tempResults[ui.item.value].value;
    var id = tempResults[ui.item.value].key;

    $('#DRMCompanyName').val(name);
    $('#DRMCompanyName').text(name);

    if ($('#DRMCompanyId').text() == '') {
        $('#DRMCompanyId').val(id);
        $('#DRMCompanyId').text(id);
    }
}

EDIT

Forgetting one minor thing! Add this to the beginning of the select: function!

event.preventDefault();

By default, when selecting, the autocomplete will use the ui.item.value to populate the element that it's wired up with. Using event.preventDefault() will prevent the already wired up event handler to be called used within the autocomplete.

event.preventDefault() documentation.

share|improve this answer
    
No, that's what we want according to our users. The issue is that the concatenated label of value + " " + key isn't showing up in the proper field. Instead the value is being placed in both. –  NealR Jun 12 '13 at 18:32
    
Are you missing the second part of your answer? –  NealR Jun 12 '13 at 18:36
    
I was. Fixed now. –  technicallyjosh Jun 12 '13 at 18:48
    
Unfortunately this still winds up putting the id in the DRMCompanyName field for some reason. Good idea tho –  NealR Jun 12 '13 at 19:37
    
Nevermind, this appears to be working but will not display properly (see edits if you're still interested). Thx! –  NealR Jun 12 '13 at 19:56

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.