Home
Auto Suggest Javascript JSON C# SQL
You'll need 2 asp.Net web forms - Suggest.aspx and SuggestListener.aspx
Suggest.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Suggest.aspx.cs" Inherits="Voldemort1.Suggest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Auto Suggest</title>
<style>
.overlay {
position: absolute;
background-color: antiquewhite;
padding: 5px;
display: none;
border-radius: 5px;
}
.overlaysubdiv {
padding: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<h1>Auto Suggest</h1>
Type something into the textbox below...
<br />
<asp:TextBox ID="MyTextBox" OnKeyUp="fillSuggestions(event)" runat="server" />
<br />
<div id="suggestionsContainer" class="overlay"></div>
<script>
function fillSuggestions(event) {
console.log(event.target.value);
var MyResponse = ''
fetch('SuggestListener.aspx?id=' + event.target.value)
.then(res => {
if (res.ok) {
return res.json()
}
else {
console.log('Bad Response')
}
})
.then(data => {
displaySuggestions(data)
})
}
function displaySuggestions(suggestions) {
suggestionsContainer.innerHTML = ''
suggestionsContainer.style.display = 'none'
suggestions.forEach(item => {
const itemDiv = document.createElement('div')
itemDiv.textContent = item.Description
itemDiv.className = 'overlaysubdiv'
itemDiv.addEventListener('click', function () {
MyTextBox.value = item.Description
suggestionsContainer.innerHTML = ''
suggestionsContainer.style.display = 'none'
})
itemDiv.addEventListener('mouseover', function () {
itemDiv.style.backgroundColor = 'burlywood'
})
itemDiv.addEventListener('mouseout', function () {
itemDiv.style.backgroundColor = 'antiquewhite'
})
suggestionsContainer.appendChild(itemDiv)
suggestionsContainer.style.display = 'block'
})
}
</script>
</form>
</body>
</html>
Suggest.aspx.cs (empty really, the work is done in the JS of the page)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Voldemort1
{
public partial class Suggest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
}
SuggestListener.aspx (just the setup code and a Literal - NOTHING ELSE)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SuggestListener.aspx.cs" Inherits="Voldemort1.SuggestListener" %>
<asp:literal ID="MyShow" runat="server" />
SuggestListener.aspx.cs
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Voldemort1
{
public partial class SuggestListener : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string qwe = "SELECT Contract.Description FROM Contract WHERE ";
int x = 0;
if (string.IsNullOrEmpty(Request["id"]) == false)
{
string[] searchList = Request["id"].Split(' ');
foreach (string s in searchList)
{
qwe += "Contract.Description LIKE CONCAT('%', @QueryString" + Convert.ToString(x) + ", '%') AND ";
x++;
}
qwe = qwe.Substring(0, qwe.Length - 4);
string[] ParamNames = new string[searchList.Length];
object[] ParamValues = new object[searchList.Length];
for (int i = 0; i < searchList.Length; i++)
{
ParamNames[i] = "@QueryString" + Convert.ToString(i);
ParamValues[i] = searchList[i];
}
DataTable dt = RC.SQLResults(qwe, RC.StrumisConn(), ParamNames, ParamValues);
DataRow row = dt.NewRow();
row["Description"] = "--ALL--";
dt.Rows.InsertAt(row, 0);
qwe = JsonConvert.SerializeObject(dt);
MyShow.Text = qwe;
}
}
}
}
Reader's Comments
Name
Comment
Add a RELEVANT link (not required)
Upload an image (not required)
Uploading...
Home