Value is applied instead of label to textbox

Question

@charlietfl Im sory, im returning a json collection of SelectListItem from Asp.Mvc view the previous data sample was the result of map operation, the ajax return is:

[  
Object { Selected=false, Text="Guarujá", Value="9182"},  
Object { Selected=false, Text="Jaboticabal", Value="9265"},  
Object { Selected=false, Text="Jacareí", Value="9267"},  
Object { Selected=false, Text="Jandira", Value="9277"},  
Object { Selected=false, Text="Jaú", Value="9285"},  
Object { Selected=false, Text="Jundiaí", Value="9295"}  
]

Im thinking autocomplete receive an array of : { label: "textToShow", value: "valueToBeKey" }
The "Object" in each line of my return to source event is breaking it ?
Im so sleep now but all help is welcome. Thanks a lot

@charlietfl There is a data sample returned to source event after map operation :

[  
Object { label="Guarujá", value="9182"},  
Object { label="Jaboticabal", value="9265"},  
Object { label="Jacareí", value="9267"},  
Object { label="Jandira", value="9277"},  
Object { label="Jaú", value="9285"},  
Object { label="Jundiaí", value="9295"},  
Object { label="São João da Boa Vista", value="9647"},  
Object { label="São José do Rio Preto", value="9659"},  
Object { label="São José dos Campos", value="9660"}  
]

Having the same problem of this question but the solution dont work for me.
Someone can help me ?
In my key/value scenario after selecting item jquery set textbox with value and not with label.
I found the point where jquery set my textbox with the value:

.menu({
 focus: function( event, ui ) {
    var item = ui.item.data( "item.autocomplete" );
    if ( false !== self._trigger( "focus", event, { item: item } ) ) {
        // use value to match what will end up in the input, if it was a key event
        if ( /^key/.test(event.originalEvent.type) ) {
            self.element.val( item.value );   <<<======  SETTING HERE
        }
    }
 },

Here is my code :

//-------------------------------------------------
function resetElmntKey(elm) {
    var nmItK = $(elm).attr('data-fielditemid');
    var sltK = $("input[name='" + nmItK + "'][type='hidden']");
    $(sltK).val(0);
}
//-------------------------------------------------
function setupSelection(elm, selIt) {
    if (selIt != undefined) {
        var nmItK = $(elm).attr('data-fielditemid');
        var sltK = $("input[name='" + nmItK + "'][type='hidden']");
        var id = $(elm).attr('id');
        var sltV = "#" + id;
        $(sltK).val(selIt.value);
        $(sltV).val(selIt.label);
    }
}
//-------------------------------------------------
var context = new Array();
function setupView() {
    var elm = $("div[class='editor-field'] :text");
    $.each(elm, function () {
        //-------
        elemento = $(this);
        //-------
        /*
        elemento.keypress(function (event) {
            if (event.keyCode == 13) {
                event.preventDefault();
            }
        });
        */
        //-------            
        elemento.autocomplete({
            source: function (request, response) {
                var elId = $(this.element).attr('id');
                context[elId] = new Array();
                context[elId].elUr = this.element.attr('data-urlactionfind');
                context[elId].elFt = this.element.attr('data-fieldfilterid');
                context[elId].vlFt = $("#" + context[elId].elFt).val();
                context[elId].elVl = this.element.val();
                context[elId].result = null;
                $.ajax
                (
                    {
                        url: context[elId].elUr,
                        dataType: "json",
                        data: { filtro: context[elId].vlFt, fragmento: context[elId].elVl },
                        success: function (data) {
                            context[elId].result = $.map(data, function (item) {
                                return { label: item.Text, value: item.Value }
                            });
                            response(context[elId].result);
                        }
                    }
               )
            },
                select: function (event, ui) {
                resetElmntKey(this);
                var elId = $(this).attr('id');
                setupSelection(this, ui.item);
            },
            focus: function (event, ui) {
                event.preventDefault(); 
                resetElmntKey(this);
                var elId = $(this).attr('id');
                setupSelection(this, ui.item);                    
            }
        }).blur(function (event) {
            event.preventDefault(); 
            resetElmntKey(this);
            var elId = $(this).attr('id');
            if (context[elId].result != undefined) {
                var usrVal = this.value;
                var res = $.grep(context[elId].result, function (selIt, idx) {
                    return $.trim(selIt.label) == $.trim(usrVal);
                });
                if (res != undefined) {
                    setupSelection(this, res[0]);
                }
            }
        });
        //-------
    });
    /*
    elm.keyup(function () {
    var url_busca = $(this).attr('data-urlactionfind');

    alert('[id:' + $(this).attr('id') + ']' +
    '[val:' + $(this).val() + ']' +
    '[urlact:' + $(this).attr('data-urlactionfind') + ']' +
    '[fldFlt:' + $(this).attr('data-fieldfilterid') + ']');
    });
    */
}
function onloadpartial() {
    setupView();
}
//-------------------------------------------------

depends on what data looks like....don't need to display 90% of code you've shown, and you don't have a data sample — charlietfl, Mar 05 '12 at 04:23
See that: http://stackoverflow.com/questions/6716266/jquery-autocomplete-categories-select-label-and-value — , Mar 08 '12 at 00:36
See it: http://stackoverflow.com/questions/1267149/how-to-detect-when-user-ignores-jquery-autocomplete-suggestions — , Mar 08 '12 at 14:09

score 2 · Accepted Answer · answered Mar 12 '12 at 02:02

2

All you need is put "return false;" at end of events "select" and "focus".
You will have problems with id setup when user type all item instead of select one.
Many times when user type all item instad of select one the setup of related id element will not be done.

answered Mar 12 '12 at 02:02

partialsolving

36
1

Thanks, it really solves it. About id setup you are right, many times, mainly when type fast and exit, there is no data on result variable to lookup for one equal then function dont setup id, i will open another question about it, thanks for point me it too. – newway Mar 12 '12 at 13:14

score 0 · Answer 2 · answered Mar 06 '12 at 01:10

0

You appear to have a mismatch of name/values in your $.map in ajax success you have this:

 return { label: item.Text, value: item.Value }`

But the data doesn't have a key Text it should be Label.

answered Mar 06 '12 at 01:10

charlietfl

164,229
13
110
143

Thanks a lot but i think i was not clear, there is my comment on top of my question. Thanks very much for your time and help. – newway Mar 06 '12 at 01:33

Value is applied instead of label to textbox

2 Answers2

Linked