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



Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now