Autocomplete comes in very handy at times. There are various sentiments expressed on the internet regarding the autocomplete feature, but truthfully and practically, you would come to notice that it has more benefits than flaws, on top of a rather obvious humor factor.

jQuery autocomplete is a similar feature that you find when you are searching the web using Google. Autocomplete is not only time-saving, and efficient when it comes to searching the internet, but is very handy when working with forms as well. As such, this is one functionality that you should definitely offer to your clients.

This particular article is all about tutorials regarding the different ways you can use jQuery autocomplete. Of course, the article also educates you regarding different ways you can create your own autocomplete features. We will list down several tutorials, that are easy to follow and simple to understand. They should help you in understanding everything there is to know about jQuery autocomplete and hopefully, they will help. Enjoy the read, and let us know what you think.

TextExt Plugin for jQuery

TextExt is a plugin for jQuery which is designed to provide functionality such as tag input and autocomplete.

textextjs

AutoSuggest: An AJAX auto-complete text field

The AutoSuggest class adds a popdown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the tab key. The values for the suggestion list are to provided as XML (by a PHP script, or similar).

AutoSuggest

Yahoo and Google Suggestions

Learn google yahoo suggestions search box in this article.

Jquery-Autocomplete-7

dhtmlxCombo

dhtmlxCombo is a cross-browser JavaScript combobox with an autocomplete feature. It extends basic select box functionality and provides the ability to display suggestions while a user types in the text field.

Jquery-Autocomplete-6

TimeDropdowns Autocomplete

It’s a time picker similar to how Google Calendar’s time picker works for events. It’s meant to be smart, sexy and intuitive.

Jquery-Autocomplete-5

Magic Suggest

Auto-suggest combo with bootstrap theme using jQuery

Jquery-Autocomplete-4
Autocomplete

The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give “ja” (for Java or JavaScript) a try.

Jquery-Autocomplete-1

jQuery autocomplete tutorial

My goal was to make an autocomplete on a site that passed also another value as the selected to the new page.

Jquery-Autocomplete-2

Typeahead

A flexible JavaScript library that provides a strong foundation for building robust typeaheads.

Jquery-Autocomplete-3

2 COMMENTS

  1. i have to create auto complete text box in my web form for the below condition

    1.if i type country name then the auto complete suggestion should show the list of countries,state and city name which are stored in my database.

    2.if i type city name then the auto suggestion should show the country and statename from my database,similarly statename also

    For Example : if the user type

    tamilnadu

    then the result will be

    tamilnadu, India

    if the user type chennai in text box then the auto complete suggestion should be

    chennai,tamilnadu, india

    if the user type Erode tamilnadu

    then the result should be

    Erode,tamilnadu,india

    3.i have use different tables for each values like city, state, and country

    all i have done till now is ive a textbox which shows only city search

    My question is how can i achieve the result as i mentioned above like mulitple entries input to the textbox and multiple suggestion as a output like google place search

    pls guide me i’ve search all over the web but i cant find the perfect solution

    Here is my code for script

    $(function () {
    $(‘#’).autocomplete({
    source: function (request, response) {
    $.ajax({
    url: “Default.aspx\getCityName”,
    data: “{‘pre’:'” + request.term + “‘} “,
    datatype: “json”,
    type: “POST”,
    contentType: “application/json; charset=utf-8”,
    success: function (data) {
    response($.map(data.d, function (item) {

    return {
    cityname: item.cityname,
    country: item.country,

    json: item

    }
    }));

    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert(textStatus);
    }

    });
    },

    focus: function (event, ui) {
    $(‘#’).val(ui.item.cityname);
    return false;
    },
    select: function (event, ui) {
    $(‘#’).val(ui.item.citycame);
    return false;
    }

    }).data(“ui.autocomplete”)._renderItem = function (ul, item) {
    return $(“”)
    .append(“City:” + item.cityname + ”
    Country :” + item.country + “”)
    .appendTo(ul);
    };

    });

    Code of my webservice :

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static List getCityName(String pre)
    {
    List allcity = new List();
    using(MydatabaseEntities dc = new MydatabaseEntities())
    {
    allcity = (from a in dc.Searchcities
    where a.cityname.StartsWith(pre)
    select a).ToList();

    }
    return allcity;
    }

LEAVE A REPLY

Please enter your comment!
Please enter your name here