CFF Coding Source - Bootstrap Tags Input (Classic ASP and SQL Server Database)

Live Editing Disabled for Server-Side Example

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bootstrap Tags Input by: cffcs.com</title>

<div id="Info">
Type out any of the below tags to get their results, arrow down to select, <br />and hit the [Enter] key
</div>

CSS

#Title{
font-size: 1em;
text-align: center;
border-bottom: 1px double #000;
margin-bottom: 2em;
}

#Info{
font-size: 1em;
text-align: center;
border: 1px double #000;
margin: 2em 0 2em;
}

/*=-----------------app.css-----------------=*/
.bootstrap-tagsinput {
    width: 450px;
}

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
    margin-bottom: 0;
}

.twitter-typeahead .tt-hint
{
    display: none;
}

.tt-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    cursor: pointer;
}

.tt-suggestion {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333333;
    white-space: nowrap;
}

.tt-suggestion:hover,
.tt-suggestion:focus {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: #428bca;
}

SQL

-- Create a new database called [Test] in SQL Server.
-- Right-click and choose [New Query]
-- Copy and paste the code below and hit [Execute]

USE [Test]
GO
/****** Object:  Table [dbo].[Tags]    Script Date: 4/4/2022 1:12:42 PM ******/

CREATE TABLE [dbo].[Tags](
    [TagID] [int] IDENTITY(1,1) NOT NULL,
    [TagName] [nvarchar](50) NOT NULL,
 CONSTRAINT [PK_Tags] PRIMARY KEY CLUSTERED 
(
    [TagID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
GO
SET IDENTITY_INSERT [dbo].[Tags] ON 
GO
INSERT [dbo].[Tags] ([TagID], [TagName]) VALUES (1, N'Dallas')
GO
INSERT [dbo].[Tags] ([TagID], [TagName]) VALUES (2, N'Charlotte')
GO
INSERT [dbo].[Tags] ([TagID], [TagName]) VALUES (3, N'Raleigh')
GO
INSERT [dbo].[Tags] ([TagID], [TagName]) VALUES (4, N'Houston')
GO
INSERT [dbo].[Tags] ([TagID], [TagName]) VALUES (5, N'Washington')
GO
INSERT [dbo].[Tags] ([TagID], [TagName]) VALUES (6, N'New York')
GO
INSERT [dbo].[Tags] ([TagID], [TagName]) VALUES (7, N'Los Angeles')
GO
INSERT [dbo].[Tags] ([TagID], [TagName]) VALUES (8, N'Sydney')
GO
INSERT [dbo].[Tags] ([TagID], [TagName]) VALUES (9, N'Melbourne')
GO
SET IDENTITY_INSERT [dbo].[Tags] OFF
GO
, USE [Test]
GO
/****** Object:  Table [dbo].[Tags]    Script Date: 4/4/2022 1:12:42 PM ******/

CREATE TABLE [dbo].[Tags](
    [TagID] [int] IDENTITY(1,1) NOT NULL,
    [TagName] [nvarchar](50) NOT NULL,
 CONSTRAINT [PK_Tags] PRIMARY KEY CLUSTERED 
(
    [TagID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
GO
SET IDENTITY_INSERT [dbo].[Tags] ON 
GO
INSERT [dbo].[Tags] ([TagID], [TagName]) VALUES (1, N'Dallas')
GO
INSERT [dbo].[Tags] ([TagID], [TagName]) VALUES (2, N'Charlotte')
GO
INSERT [dbo].[Tags] ([TagID], [TagName]) VALUES (3, N'Raleigh')
GO
INSERT [dbo].[Tags] ([TagID], [TagName]) VALUES (4, N'Houston')
GO
INSERT [dbo].[Tags] ([TagID], [TagName]) VALUES (5, N'Washington')
GO
INSERT [dbo].[Tags] ([TagID], [TagName]) VALUES (6, N'New York')
GO
INSERT [dbo].[Tags] ([TagID], [TagName]) VALUES (7, N'Los Angeles')
GO
INSERT [dbo].[Tags] ([TagID], [TagName]) VALUES (8, N'Sydney')
GO
INSERT [dbo].[Tags] ([TagID], [TagName]) VALUES (9, N'Melbourne')
GO
SET IDENTITY_INSERT [dbo].[Tags] OFF
GO

Classic ASP

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
getServer = "ServerName"
getInstance = "InstanceName"
getID = "testuser"
getPW = "testuser"
getCat = "DatabaseName"

Set objConn = CreateObject("ADODB.Connection")
objConn.Open("Provider=SQLOLEDB; Data Source="&getServer&"\"&getInstance&"; Initial Catalog="&getCat&";User ID="&getID&";Password="&getPW&";")
%>

<!--#include file="../ACN.asp"-->
[<%'Tags.asp
sql = "Select TagName as Tag from Tags"
Set sqlTags = CreateObject("ADODB.Command")
sqlTags.ActiveConnection=objConn
sqlTags.Prepared = true
sqlTags.commandtext = sql
set rsTags = sqlTags.execute
if rsTags.eof then
response.write "Sorry, there are no records to show."
else
while not rsTags.eof
Tag = rsTags("Tag")
rsTags.movenext
' Here we check to see if we are at the end, 
' if not, add a COMMA after the record, 
' if we are at the end, do not add a final COMMA.
If not rsTags.eof then
%>
"<%=Tag%>",
 <%else%>
 "<%=Tag%>"<%
 end if
 wend
 %>]
<%
' Here we close our RecordSet
rsTags.close
set rsTags = nothing
' Here we close our Database Connection
objConn.close
set objConn = nothing
end if%>

Resources

(Copy JS and CSS code below, and add it to your project. It is best to download and host from within your site. This will reduce bandwidth drain from your hosting server and the servers hosting the actual files.)

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.map
https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js.map
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.map

https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js.map

Preview

About Company

Top Viewed Articles