Autopopulating data from the server to a textbox using jquery

Question

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:

1. 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?

Answer 1

Try the following sample, i think this will help:

$("#Products").autocomplete({
    source:
    function (request, response) {
        $.ajax({
            url: href, // Search Url Goes Here
            dataType: "json",
            cache: false,
            data: {
                term: request.term
            },
            success: function (data) {
                response(data);
            }
        });
    },
    minLength: 1,
    select: function (event, ui) {
        if (ui.item) {
            $("#Products").val(ui.item.value);
        }
    }
});

Answer 2

We have implemented same thing in our project.

Let me show you an example

  @Html.TextBoxFor(m => m.Filter.MyData)
                                <span>
                                    <img onclick=" openAutoCompleteBox() " alt="click" src="../Content/images/dropdown_arrow.gif"
                                        height="19px" style="cursor: pointer;"></span>

What I am doing in this is that I am trying to make it functional as Dropdown, so added an image at side of it , onclicking on it, it will call openAutoCompleteBox.

1. 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"

For this what we have done is, we have loaded values at page load only and Autocomplete plugin will search value on client side only

1. After the page load, when I type "KL" and tab out the action "Search" of "Student" controller is not getting called.

You will not need to call controller, as Autocomplete plugin will take care of this

I am not sure, if my implementation matches to your requirement but I calling controller again and again after a character will give your production server extra load. If you have static values then I would suggest it to load it at time when page loads. If its dynamic then your approach is fine.

Updated code for OpenAutoComplete

var sState = $(".jsonSuggestResults").is(":visible");

    function openAutoCompleteBox() {

        if (sState) {
            $(".jsonSuggestResults").hide();
            sState = false;
        } else {
            var valCrime = $("#Filter_dropdown").val();
                      sState = true;
        }
    }