Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Autosuggest using jQuery

0.00/5 (No votes)
7 Aug 2012 1  
I first tried using Ajax autocomplete, but found jQuery as an alternate

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here