Click here to Skip to main content
Click here to Skip to main content

Tagged as

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"

Introduction

I wrote an article for autocomplete at http://www.codeproject.com/Articles/259376/Using-AJAX-AutoCompleteExtender-for-autosuggest. AJAX was an alternate, another alternate could be using jQuery.

Background   

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: http://docs.jquery.com/UI/Autocomplete.

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

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

JavaScript code:

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

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.

License

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

Share

About the Author

Anuja Pawar Indore
Technical Lead 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 | Mobile
Web01 | 2.8.140826.1 | Last Updated 11 Dec 2012
Article Copyright 2012 by Anuja Pawar Indore
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid