AJAX AutoCompleteExtender using Google Suggest API

• Download source code - 187 KB

Introduction

This is an example on how to use the AJAX Toolkit's AutoCompleteExtender and make a Google Suggest like application using the Google's Suggest API.

Background

Here, I am trying to make a Google Suggest like site, using the Google Suggest REST API.

Using the code

AJAX needs to be installed if you are using VS 2005. The AutoCompleteExtender needs a feed from a webservice. Here, I have made a Google webservice, called Google.asmx. The AutoCompleteExtender works on the textbox and uses a webservice method. You need to have a webform (default.aspx) and a webservice (google.asmx). Note: I have used VS 2005 with AJAX extensions and the AjaxControlToolkit. Create a new AJAX enabled website from VS 2005. The default.aspx has nothing but a textbox, and the associated AutoCompleteExtender.

First, let's look at the webservice. I have named it google.asmx.

<%@ WebService Language="C#" Class="google" %>
using System;
using System.Collections.Generic;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml;

/// <summary>
/// Summary description for google
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class google : System.Web.Services.WebService
{ 
    [WebMethod]
    public string[] getList(String prefixText)
    {
        XmlDocument doc = new XmlDocument();
        List<String> suggArList = new List<string>();
        string url = "http://google.com/complete/search?output=toolbar&q=" + prefixText;
        doc.Load(url);
        foreach (XmlNode node in doc.SelectNodes("//CompleteSuggestion"))
        {
            string value = node.SelectSingleNode("suggestion/@data").InnerText;
            suggArList.Add(value);
        }
        return suggArList.ToArray();
    }
}

The default.aspx has the script manager, a textbox, a button, and the AutoCompleteExtender associated with the textbox. Check the code.

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        TextBox1.Focus();
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        string url = "http://www.google.co.in/search?hl=en&q=" + TextBox1.Text;
       Response.Redirect(url);
    }
}

Points of interest

I think the code is self explanatory and easy to understand. AutoCompleteExtender can be implemented for many functionalities like suggesting information to the users while filling a form.