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:
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
כתב: כרמל שוורצמן
