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

Post Your Comment Posts/Links Rules

Name

Comment

Add a RELEVANT link (not required)

Upload an image (not required)

No uploaded image
Real person number
Please enter the above number below




Home
Admin Ren's Biking Blog