Click here to Skip to main content
13,510,146 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


4 bookmarked
Posted 11 Dec 2012

Using AJAX AutoCompleteExtender for autosuggest

, 11 Dec 2012
Rate this:
Please Sign up or sign in to vote.
This is an alternative for "Using Ajax AutoCompleteExtender for autosuggest"


I wrote an article for autocomplete at AJAX was an alternate, another alternate could be using jQuery.


jQuery is a lightweight JavaScript library. Using the jQuery plugin is simple. Building and deploying the autocomplete js just takes a few minutes and very few lines of code.

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 auotoselect.js for a textbox you will get a property named autocomplete.

Add a textbox on which you wish to apply autosuggest and add the script. My function GetAllSearchProducts gets 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();" />

JavaScript code:

<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


C# code:

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

Points of Interest  

Found it simple and easy to use. Implementation is easy and rendering is fast.


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

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180417.1 | Last Updated 11 Dec 2012
Article Copyright 2012 by Anuja Pawar Indore
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid