Using AJAX AutoCompleteExtender for autosuggest

Introduction

I wrote an article for autocomplete at http://www.codeproject.com/Articles/259376/Using-AJAX-AutoCompleteExtender-for-autosuggest. AJAX was an alternate, another alternate could be using jQuery.

Background   

jQuery is a lightweight JavaScript library. Using the jQuery plugin is simple. Building and deploying the autocomplete js just takes a few minutes and very few lines of code.

For using jQuery autosuggest, we need the js file "jquery.ui.autocomplete.autoSelect.js". Refer this link for download and help: http://docs.jquery.com/UI/Autocomplete.

Using the code 

Once you have added the auotoselect.js for a textbox you will get a property named autocomplete.

Add a textbox on which you wish to apply autosuggest and add the script. My function GetAllSearchProducts gets all the products beginning with the letter typed in the textbox named "searchproduct".

<div>
    <input name="" type="text" class="txtF ui-autocomplete-input" 
       id="searchproduct" align="absmiddle" />
    <input name="" type="button" class="btimg" align="absmiddle"
            onclick="SearchProduct();" />
</div>

JavaScript code:

<script type="text/javascript">

    $(function () {
        $("#searchproduct").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "../Common/GetAllSearchProducts",
                    data: "{ 'name': '" + request.term + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        if (data != '') {
                            response($.map(data, function (item) {
                                return {
                                    value: item.Name,
                                    text: item.Id
                                };
                            }));
                        }                                                                            
                       
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        // alert('@T("Alert.Symbol.Msg")');
                    }
                });
            },
            select: function (event, ui) {

                $(':hidden[id=hdnmedicineid]').val(ui.item.text.toString());
                $(':hidden[id=hdnmedicinenm]').val(ui.item.value.toString());

            },

            minLength: 1,
            autoFocus: true
        });

    });
                       
</script>

C# code:

public JsonResult GetAllSearchProducts(string name = "")
{
    //get all products
    var products = _productService.GetAllProducts(name).ToList();

    var result = from m in products
                select new { m.Id, m.Name };

    return Json(result.ToList(), JsonRequestBehavior.AllowGet);
}

Points of Interest  

Found it simple and easy to use. Implementation is easy and rendering is fast.