Search jQuery

jQuery Forum

Autocomplete

in Using jQuery UI • 6 months ago

Hi Guys

A quick one I hope. I'm a newb with all things javascript, and I'm trying to use the jQuery autocomplete widget in MVC.

I have it set up to return a class:

Collapse | Copy Code

class jsonReturn { public int value { get; set; } public string label { get; set; } }

This works to the extent that I get a list of the values, but it sticks the value in my textbox when selected.

I'm after having this value put into its own hidden field as below:

Collapse | Copy Code

@Html.HiddenFor(m => m.SupplierTypeID) @Html.TextBoxFor(m => m.SupplierBranchName) @Html.HiddenFor(m => m.SupplierID)

I want the label from jsonReturn to go into m.SupplierBranchName and value to go into m.SupplierID.

Below is my current script:

Collapse | Copy Code

<script> $("#SupplierBranchName") .autocomplete({ source: function (request, response) { $.getJSON('@Url.Action("SupplierSearch")', { term: request.term, supplierTypeID: $('#SupplierTypeID').val() }, response ) } });   </Script>

I've tried all sorts and I've searched all over tinterweb and not found a solution that works for me or makes sense.... I either wind up with java script errors or nothing happens at all. (Not even registering in Chromes java script console sometimes).

Please can someone help me?

Replies(4)

mike_laird

Re: Autocomplete

6 months ago

Use Autocomplete's select: option to take actions after the user selects in the dropdown. You can put a function there to do almost anything. Here's an example that puts some data in the input and puts other data into a hidden input.

                select: function (event, ui){
                        $(this).val(ui.item.value);
                        $("#stateProvince").val(ui.item.stateProv ); //put stateProvince in the input box id=stateProvince
                        $("#hiddenCity").val(ui.item.name); //put the city name in the hidden input box id=hiddenCity
                  }

paulunsy

Re: Autocomplete

6 months ago

That's great, but I'm still getting the ID in my input box. Weird thing is, it appears to put the value in properly, then change it back after the script has finished. It is however happily setting my SupplierID text box and keeping that setting.

Please can you take a quick look at the below, see if you can spot what I've done wrong?

    $("#SupplierBranchName")
        
        .autocomplete({
            source: function (request, response) {
                $.getJSON('@Url.Action("SupplierSearch")', { 
                        term: request.term, supplierTypeID: $('#SupplierTypeID').val() 
                    }, response
                )
            
            },
            select: function (event, ui) {
                $(this).val(ui.item.label);
                $("#SupplierID").val(ui.item.value);
//                alert(ui.item.value);
//                alert(ui.item.label);
//                alert(this.value);
//                alert($("#SupplierID").val);
            }
    });

mike_laird

Re: Autocomplete

6 months ago

As I read your code, the contents of "label" are set as the value of the input box with id=

SupplierBranchName,  and the contents of "value" are set as the 
value of an input box with id=
SupplierID

If the value of "label" is initially set properly, and then 
changes, my hunch is you have some code somewhere else that 
fires on change or blur and messes things up. Autocomplete
is not doing that.

paulunsy

Re: Autocomplete

6 months ago

Thank you. Turned out to be very much a school boy error. I was using a class that returned two values. One named value, and the other named label. I changed it to have value and other instead. Value was picked up by the auto complete and put into the box. (this was originally my integer value) and now, "other" is free to be picked up specifically rather than by me specifying it.

A lesson learned by a true novice. Thank you very much for your help. It's very much appreciated.

Top Reply

Response title

Attachments

jQuery Forum

Autocomplete

Replies(4)

Re: Autocomplete

Re: Autocomplete

Re: Autocomplete

Re: Autocomplete

Statistics

Tags

Actions

Related Posts