Autosuggest using jQuery

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


Autosuggest using jQuery


For using jQuery autosuggest we need the js file "jquery.ui.autocomplete.autoSelect.js". Refer this link for download and help

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


        <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 () {


                source: function (request, response) {


                        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) {







                minLength: 1,

                autoFocus: true






    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
Anuja Pawar

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


Latest Blogs