Click here to Skip to main content
11,502,845 members (60,984 online)
Click here to Skip to main content

Tagged as

Autosuggest using jQuery

, 7 Aug 2012 CPOL 6.9K 10
Rate this:
Please Sign up or sign in to vote.
I first tried using Ajax autocomplete, but found jQuery as an alternate


Alternative for the article  

Ajax was one alternate, an alternate can be 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 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.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Anuja Pawar Indore
Program Manager Diaspark
India India
I have keen interest in learning new things, exploring more on a topic and being more versatile
Follow on   Twitter

Comments and Discussions

-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150520.1 | Last Updated 7 Aug 2012
Article Copyright 2012 by Anuja Pawar Indore
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid