Saturday, March 21, 2020

How to write an HTTP Handler to feed an AUTOCOMPLETE JQUERYUI widget

In this tutorial we'll learn how to write an HTTP Handler to feed an AUTOCOMPLETE JQUERYUI widget 
This JQueryUI Autocomplete will be showing as follows :



Step by step How to write an HTTP Handler to feed an AUTOCOMPLETE JQUERYUI widget



First, we create a new ASPNET HTTP HANDLER, in Visual Studio, as follows:

using System.Web.Script.Serialization;
namespace WEBAPI_AJAX

    public class EmployeeHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            string t = context.Request.QueryString["term"];

            Func<string, bool> pred = (w) => { if (w.StartsWith(t)) return true; else return false; };

            List<string> l = new List<string>()  { "albert","andrew","asterix","ddddd","eeeeee","fffffff","gggggggg","hhhhhh","iiiiii"};

            l = l.Where(pred).ToList();
            //context.Response.ContentType = "text/plain";
            context.Response.Write(new JavaScriptSerializer().Serialize(l));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}





Then, we create the HTML file :

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Autocomplete - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.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>
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <script>
        $(()=>{
       
            $("#tags").autocomplete({
                source:  'http://localhost:58776/HANDLER1.ASHX'
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="jumbotron">
                <div class="form-group">
                    <label for="tags" class="control-label col-md-2">Tags: </label>
                    <div class="col-md-10">
                        <input class="form-control" id="tags">
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>




That's all.... 
In this tutorial we've seen how to write an HTTP Handler to feed an AUTOCOMPLETE JQUERYUI widget. 
Happy programming.....
      By Carmel Shvartzman
כתב: כרמל שוורצמן