posted by  on  

jQuery AutoComplete Widget gives pre-populated list of suggestions as user types in input field. You need to provide array of strings as source to this widget. Array can be created by some static values or get values from database. Also you can mention minLength to specify after how many characters input call for suggestions to be made.

Autocomplete is one of the most important parts of modern rich web interface. Actually, you can create an autocomplete, using an AJAX call to build a list (server side) and afterwards to display the list using javascript (usually below autocomplete input).

The Autocomplete textbox widget is one of the most popular jQuery UI widget, which is used  for provides suggestions while user type into the input field (textbox). You noticed how the related suggestions highlights when we start typing in the Google search box, this is called autocomplete.

AutoComplete widget has many properties which you can use to customize your execution and control look and feel.

For this tutorial we will use Source, minLength and Select event.

Step 1 :- Create New Project.

Go to File > New > Project > Select asp.net web application > Enter Application Name > Click OK.

Step 2 :- Create table for fetch data.

Now we will create a table. Give table name like 'tblCountry'. Below is the screen shot. Insert some data into tblCountry table for testing purpose.

country sql table

Step 3 :- Add new ADO.NET Entity Data Model.

Follow the steps given. Once you have done the processes, you can see the edmx file and other files in your project.

Step 4 :- Add new Action method

Add new action method into Home controller to get the view where we will implement JQuery UI autocomplete textbox.

Index View

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="form-group">
    <label class="col-md-2 control-label">Country</label>
    <div class="col-md-10">
        <input type="text" id="txtCountry" class="form-control" />
    </div>
</div>

JS Code

<script>

    $(document).ready(function(){
        $("#txtCountry").autocomplete({
            source: function( request, response ) {
                $.ajax( {
                    url: "/Home/BindCountry",
                    dataType: "json",
                    method: "Post",
                    data: {
                        searchTerm: request.term
                    },
                    success: function (data) {
                        debugger
                        response($.map(data, function (item) {
                            return {
                                label: item.CountryName,
                                value: item.CountryName,
                            }
                        }))
                    }
                } );
            },
            minLength: 2,
            select: function( event, ui ) {
                alert(ui.item.value);
            }
        } );
    })

</script>

We have added Source method which makes a call to BindCountry() written in Home controller. The return values from method shown as pre populated suggestions for user.

We mentioned minLength as 2, it means when ever user enter 2 character in TextBox the AutoComplete method will fire and get its source data.

Select event gives you selected value by user. The value can be read by ui.item.value

The following MVC controller method BindCountry() will be called and it returns the json data.

[HttpPost]
public JsonResult BindCountry(string searchTerm)
{
    var countryList = (from c in db.tblCountries.AsEnumerable()
                       where c.CountryName.ToLower().Contains(searchTerm.ToLower())
                       select new tblCountry
                       {
                           CountryCode = c.CountryCode,
                           CountryName = c.CountryName
                       }).ToList();
    return Json(countryList, JsonRequestBehavior.AllowGet);
}

Output :

jquery auto complete country textbox

Lateshtclick Technology Blog
Tags Asp.Net MVC Jquery
posted by Latesht Click Latesht Click

Comments


Leave a Reply

Feel free to contribute!
Comment:
Name*:
Email*: