Autocomplete (jQuery)

In order to create a simple autocomplete in a task text box, you can use, for instance, the powerful jQuery library Javascript which, thanks to its plugs-in, allows you to easily insert many functionalities without changing the task.

In the following example the photogallery task for MapViewer is used to insert the autocomplete in the text box allowing you to look for data linked with a list of photos.

In the markup of page Default.aspx after tag Title insert the following code

<title></title>

<script type="text/javascript" src="Javascript/jQuery/jquery.js"></script>

<script type="text/javascript" src="Javascript/jQuery/jquery.bgiframe.min.js"></script>

<script type="text/javascript" src="Javascript/jQuery/jquery.autocomplete.js"></script>

<link rel="stylesheet" href="css/jQuery/jquery.autocomplete.css" type="text/css" />

<script type="text/javascript">

  $(document).ready(

  function() {

  var ac_taskNameArcSewer = "#" + "NameYourTaskManager"; //name taskManager contains PhotoGalleryTask

  var ac_handlerAutoComplete = "AutoComplete.ashx";

  var ac_photoGalleryTaskName = "PhotoGalleryTask1";

  var ac_PhotoGalleryTaskName = ac_taskNameArcSewer + "_" + ac_photoGalleryTaskName + "_";

  var ac_txtFindPG = ac_PhotoGalleryTaskName + "txtName"; //name your textbox in task PhotoGallery

  var ac_btnFindPG = ac_PhotoGalleryTaskName + "btnFind"; //name your button in task PhotoGallery

  $(ac_txtFindPG).autocomplete(ac_handlerAutoComplete + '?' + 'type=Id');

  $(ac_btnFindPG).attr("disabled", true);

  $(ac_txtFindPG).change(function(event) {

  $(ac_btnFindPG).attr("disabled", $(this).val() == '')

  });

  }

  );

</script>

On the server side, add to the project an ashx file and insert the code to populate our list for autocomplete.

<%@ WebHandler Language="C#" Class="AutoComplete" %>

using System;

using System.Web;

using System.Web.Services;

using System.Collections.Generic;

[WebService(Namespace = "http://localhost/yourNameSpace")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

public class AutoComplete : IHttpHandler

{

    static readonly log4net.ILog _log = log4net.LogManager.GetLogger(System.Reflection.MethodBase.GetCurrentMethod().DeclaringType);

    static readonly string taskFullName = System.Reflection.MethodBase.GetCurrentMethod().DeclaringType.FullName;

    static readonly string taskNamespace = System.Reflection.MethodBase.GetCurrentMethod().DeclaringType.Namespace;

    public void ProcessRequest (HttpContext context)

    {

        //// Note the query strings passed by jquery autocomplete:

        ////QueryString: {q=a&limit=150&timestamp=1227198175320}

        string nameField = context.Request.QueryString["type"];

        string queryString = context.Request.QueryString["q"];

        //create query with queryString and Name Field  //  query: nameField LIKE 'queryString + *'

        List<string> listString = GetIds(queryString,nameField); 

        if (listString != null)

        {

            foreach (string i in listString)

            {

                context.Response.Write(i + Environment.NewLine);

            }

        }

    }

    public bool IsReusable

    {

        get

        {

            return false;

        }

    }

}

For details about autocomplete jQuery you can see here