Autosuggest using jQuery

By Anuja Pawar Aug 08, 2012
In this blog I am going to explain autosuggest using jQuery.

Introduction

Autosuggest 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 var

    products = _productService.GetAllProducts(name).ToList(); var result = from m in

    products select new { m.Id, m.Name }; return Json(result.ToList(), JsonRequestBehavior.AllowGet);

    }

Anuja Pawar

Have keen interest in learning new things, exploring more on a topic and being more versatile

COMMENT USING

PREMIUM SPONSORS

Hire Mobile & Web Developer on demand. 100% satisfaction. Try for 1 week or Money Back. Local and remote developers available all over USA.

Latest Blogs