jQuery的自动完成和MVC

Question

in my partial view I have First Name, Last Name and UserName field

<tr>
    <td>
        <b>Last Name</b><span class="red">*</span>
    </td>
    <td>
        @Html.TextBoxFor(model => model.LastName, new { id = "txtLastName" })
        @Html.ValidationMessageFor(model => model.LastName)
    </td>
</tr>
<tr>
    <td>
        <b>First Name</b><span class="red">*</span>
    </td>
    <td>
        @Html.TextBoxFor(model => model.FirstName, new { id = "txtFirstName" })
        @Html.ValidationMessageFor(model => model.FirstName)
    </td>
</tr>
<tr>
    <td>
        <b>User Name</b><span class="red">*</span>
    </td>
    <td>
        @Html.TextBoxFor(model => model.UserName, new { id = "txtUserNameAdd" })
        @Html.ValidationMessageFor(model => model.UserName)
    </td>
</tr>

Now I have autocomplete on User Name

   $('#txtUserNameAdd').autocomplete({
        source: '/AdminSearchResult/UserNameList?fullName=' + $('#txtFirstName').val() + " " + ('#txtLastName').val()
    });

In my controller

public ActionResult UserNameList(string term, string fullName)
{            
    // my code

    return Json(result, JsonRequestBehavior.AllowGet);
}

When the partial view is loaded the screen has first name, last name and user name. the user enters first name and last name. based on the first name and last name entered the user name list (from active directory) become the source of the data for the auto complete drop down.

In controller I get term value in my method but i do not get the value of fullname

fullname is ($('#txtFirstName').val() + " " + ('#txtLastName').val())

I thought since there is no value in first name and last name during document.ready i tried this alternative

$(document).ready(function (e) {

    $('#txtUserNameAdd').autocomplete({
        source: '/AdminSearchResult/UserNameList?fullName=' + getFullname()
    });

}); 

function getFullname() {
    var lastName = document.getElementById('txtLastName').value;
    var firstName = document.getElementById('txtFirstName').value;

    return firstName + " " + lastName;
}

this also give me no value for full name.

Can someone help me get the value for full name.

Answer 1

I hope this helps someone even though the question is old. First, in your example you keep referring to
+ ('#txtLastName').val() instead of $('#txtLastName').val().

If you try tacking on the $ that you left out, your string should resolve correctly to the field value, but that's not going to modify your Autocomplete value and the Autocomplete method does not accept a dynamic querystring, so its best to do it this way:

http://jquery.toitl.com/?p=2012/11/03/164155/autocomplete_with_parameter

Or Create a function that handles the on submit of your request: in your jQuery ready:

//Initialize the autocomplete with jQuery options which submits on Select of item
var InitAutoComplete = function() {
var $input=$(this);
var options = {
     source: '/Index/Autocomplete',
     select: submitForm
    };
$input.autocomplete(options);
};

var ajFormSubmital = function(){
var $form= ($this); // the passed in form
var options = { 
url: 'some url',
type: 'GET',
data: $form.serialize()
};

// Now do some ajax stuff in the same scope standard ajax
$.ajax(options).done(function(data) {
var $target = $($form.find('#myspan')); //don't let the $$ fool you, one variable is named $form 
//now replace the target with the data
$newData=$(data);  //Grab the data returned by the ajax call
$target.replaceWith($newData);   
}
return false;  // we don't want the form to post directly

// create a submit form method
var submitForm = function ( e,ui ) {
var $input=$(this);  //the autocomplete input field
$input.val(ui.item.label);  //The label contains the text value can also be obtained per jQuery specs
$input.parents("form:first").submit();
}

// remember to name your variables in your controller.
// the controller will receive 'term' and also the 
// form fields will be serialized and the will have the names you assign
// in your model, not the field Ids. So concatenate in your model
// and return a json string
// Wire up the form submit event to your form in your ready event
// Wire up the autocomplete field to your your InitAutoComplete method.
// you will wire up in the $(function() {} ) - don't use $(document).ready()    
// it does not work for the ajax call after the second and even-number post     backs
// $('#myform').submit(ajFormSubmital);
//$('#myAutocomplete').each(InitAutoComplete);
// Tweak the above code and you should be able to use this in any form.