放这里以后做参考。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!-- 视频62_文章管理_11 文章添加的关键字的简易实现 -->
<head>
<base href="<%=basePath%>">
<script type="text/javascript"
src="<%=path%>/resources/js/jquery-1.9.0.js"></script>
<title>My JSP 'add.jsp' starting page</title>
<style type="text/css">
#keyword-container {
border: 1px solid #bbb;
width: 700px;
}
#keyword-input {
border: none;
width: 300px;
color: #aaa;
height: 28px;
}
div .keyword-in {
float: left;
font-size: 12px;
margin: 0 3px;
background: #3fa7cb;
padding: 3px;
color: #fff;
}
a.keyword-shut:link,a.keyword-shut:visited {
color: #fff;
text-decoration: none;
}
a.keyword-shut:hover {
color: #ff0;
}
</style>
<script type="text/javascript">
$(function() {
var num=5;
$("#keyword-input").focus(function() {
$(this).val("");
});
$("#keyword-input").blur(function() {
console.log($(this).val().length);
if ($(this).val().length == 0) {
$(this).val("请输入关键字，通过逗号或者回车确认");
}
});
$("#keyword-input").keyup(function(event) {
var code = event.keyCode;
var add=true;
if (code == 188 || code == 13) {
//c是要添加的关键字
var c = $(this).val();
if (c != "") {
if ($(".keyword-in").length >= num) {
alert("最多只能添加" + num + "个关键字");
event.preventDefault();
return;
}
var addedkeys=$("input[name='added_keywords']");
console.log(addedkeys);
/* $("input[name='added_keywords']").each(function(){
console.log($(this).val());
if($(this).val()==c){
alert("关键字已经存在");
event.preventDefault();
}else{
add=true;
}
});*/
var aks=$("input[name='added_keywords']");
for(var i=0;i<aks.length;i++){
console.log(aks[i]);
if(aks[i].value==c){
alert("关键字已经存在");
add=false;
return false;
}
}
if(add){
var ki = createKeyword(c);
$("#keywords-wrap").append(ki);
$(this).val("");}
}
}
});
//36分钟
$("#keywords-wrap").on("click", "a.keyword-shut", function() {
$(this).parent(".keyword-in").remove();
event.preventDefault();
});
$(".keyword-shut").click(function() {
});
});
//创建关键字
function createKeyword(val) {
return "<div class='keyword-in'><span>"
+ val
+ "</span><a href='add.jsp#' class='keyword-shut'> X</a>"
+"<input type='hidden' name='added_keywords' value='"+val+"'/></div>";
}
</script>
</head>
<body>
<div id="keyword-container">
<div id="keywords-wrap">
<div class="keyword-in">
<span>我的电脑</span> <a href="add.jsp#" class="keyword-shut">X</a>
<input type='hidden' name='added_keywords' value='我的电脑'/>
</div>
<div class="keyword-in">
<span>我的电脑</span> <a href="add.jsp#" class="keyword-shut">X</a>
<input type='hidden' name='added_keywords' value='我的电脑'/>
</div>
</div>
<input type="text" id="keyword-input" value="请输入关键字，通过逗号或者回车确认"/>
</div>
</body>
</html>
分享到：
相关推荐
在本篇文章中，我们将探讨如何使用jQuery库来实现这样一个功能，特别是针对城市名称的自动匹配，包括汉字和拼音简写。 首先，我们需要理解jQuery是一个强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画和...
开始技术部门打算在后台添加或者修改文章的时候，把文章里面的关键字替换为... 当用户添加，删除，更新关键字的时候，在后台生成一个js文件，格式如下： 代码如下: var wordlinkdata='[{“WordLinkAlias”:”wordlinkR
文件中的代码演示了如何将文章中的特定关键字自动添加链接，以实现一种自动化的网页内容管理。 9. 关键字链接处理： 知识点说明：在网页中，常常需要对某些特定的词进行高亮显示或提供链接。文件中的代码片段正是将...
本篇文章将深入解析基于jQuery实现的星级评价打分代码，帮助开发者理解其工作原理和实现细节。 首先，jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互等任务。在这个项目中，使用的...
最后，文章提到的实例代码通过一个简单的HTML结构和jQuery脚本来展示了如何实现输入框内关键字的查找和显示效果。虽然在提供的示例代码中出现了OCR扫描错误，但我们可以推测出代码段主要是用来演示如何使用jQuery和...
本篇文章将深入解析基于jQuery实现的折叠树形菜单代码，结合“jQuery折叠树形菜单代码.zip”压缩包中的资源，我们将探讨如何构建这样一个功能丰富的菜单导航系统。 首先，我们要明白jQuery是一个强大的JavaScript库...
本篇文章将详细介绍如何使用jQuery实现带搜索功能的下拉框多选代码。 首先，我们关注标题中的"jQuery带搜索功能下拉框多选代码"，这表明我们要讨论的是一个基于jQuery的下拉框组件，它不仅具备下拉选择的特性，还...
此外，为了提供更好的用户体验，我们还可以添加一些额外的功能，如清除搜索框、高亮匹配关键字等。清除搜索框可以通过设置输入框值为空并重新显示所有列表项来实现；高亮匹配关键字则需要使用正则表达式替换匹配到的...
本篇文章将深入探讨“jQuery练习”这一主题，特别关注如何使用jQuery实现导航菜单弹出二级菜单的功能。 首先，让我们理解导航菜单的基本结构。在网页设计中，导航菜单通常包含一级菜单项，当用户悬停在这些项上时，...
本篇文章将详细解析如何使用jQuery实现点击表格单元格展开功能，并结合具体的代码实例进行讲解。 首先，我们需要理解HTML表格的基本结构，一个简单的表格由`<table>`标签开始，内部包含若干个`<tr>`（表格行）元素...
总的来说，实现文本框输入关键字自动提示相近信息的功能，主要依赖于jQuery UI的Autocomplete组件，结合后端或前端数据源，通过JavaScript进行配置和事件处理，再配合CSS进行样式定制，最终提供用户友好的交互体验。
这篇文章将指导你如何构建一个自己的jQuery插件，理解jQuery扩展的核心原理。 首先，我们要明白jQuery插件的本质是一个包装在jQuery对象上的函数。在jQuery中，我们经常看到这样的匿名函数结构： ```javascript ...
本篇文章将深入探讨jQuery控件及其在实际项目中的应用。 jQuery控件是基于jQuery库的扩展，提供了一系列预先封装好的UI组件，如日期选择器、滑块、下拉菜单等，这些控件通常用于构建交互性强、用户体验良好的Web...
这在处理分类、关键字输入等场景下非常实用，例如在社交媒体的标签推荐、文章分类或者用户兴趣标签等方面。 使用该插件时，首先需要在HTML文件中引入jQuery库、Bootstrap CSS和JS以及jquery.tagsinput-revisited.js...
总结来说，这个jQuery下拉菜单选中添加代码的核心是使用jQuery进行事件监听和DOM操作，通过添加和移除类来控制选中状态，同时利用数据属性(data-*)来存储附加信息。结合过滤搜索功能，使得用户可以更方便地管理和...
本篇文章将围绕"jQuery+Ajax搜索框输入文字自动补全代码"这一主题，深入解析其实现原理及关键步骤。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计以及Ajax交互等任务。...
在文章中提供的代码片段演示了如何使用jQuery来实现这种效果，下面将详细分析这些代码。 首先，要实现标签切换，需要准备HTML结构。通常会使用一个无序列表（ul）来表示标签栏，列表项（li）作为各个标签，每个标签...
// 提取与关键字相关的文章列表 // 更新页面显示相关文章 }); ``` ### 4. 进阶优化 - **动画效果**：可以使用jQuery的动画功能让标签在生成或点击时具有平滑的过渡效果。 - **排序与分页**：如果标签数量过多，...
本篇文章将深入探讨如何利用jQuery ZTree实现模糊查询功能，并对树上的节点添加过滤器。 首先，我们要理解jQuery ZTree的核心特性之一是其强大的数据管理能力。通过配置数据参数，我们可以定制树的展示方式，包括...