Autopopulating data from the server to a textbox using jquery

Autopopulating data from the server to a textbox using jquery

I am developing a MVC application .net.
I have a textbox called "Products". I have to autopoulate the textbox with
the list from the server using jquery and ajax
Here is the code:
@Html.TextBoxFor(model=>model.Products,new {@id = "Products"})
In this textbox ,I need to call an action of a controller by ajax and get
the data.
$('#Products).autocomplete() {
alert('kl');
AutoCompleteDetails();
}
function AutoCompleteDetails()
{
var url = '@Url.Action("Search", "Student")';
href = url;
$.ajax({
url: href,
dataType: "json",
data: AutoDetails,
type: "POST",
context: this,
success: function (data) {
}
On the page load,the control is hitting Search action of Student
controller, I have two doubts here:
On page load ,after hitting "Search" action I am binding the model values
back to the page but these values are not seen as dropdown as suggestions
in the textbox called "Products"
2.After the page load ,when I type "KL" and tab out the action "Search" of
"Student" controller is not getting called.
Any suggestions?