Autosuggest using jQuery

Introduction  

Alternative for the article

http://www.codeproject.com/script/Articles/ArticleVersion.aspx?waid=29267&aid=435836&msg=4331629#xx4331629xx  

Ajax was one alternate, an alternate can be using jQuery

Background 

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 aotoselect.js for a textbox you will get a property named autocomplete

Add a textbox on which yo wish to apply autosuggest and write the script. My function  "GetAllSearchProducts" is getting 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>
<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>

 

  public JsonResult GetAllSearchProducts(string name = "")
        {
            

            //get all products starting with the name provided
            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.