[我有废话要说]
开始写ASP，其实不太喜欢.Net的东西。。。不过比较喜欢写JS,也想学下JQuery~就这样吧~
[正文——把JQuery的Autocomplete封了大家调]
需求：
1提供公用的js文件，传入formId和字符数组，输入时，可以根据字符数组在form上autoComplete。
2该字符数组从配置文件中读取
part1:读取xml配置文件，放在Hashtable中：
//公共方法，读取配置文件。
using System;
using System.Xml;
using System.Collections;
namespace com.Origin.Base.test
{
public static class ReadProperty
{
public static Hashtable ht = null;
private static String path = "D://property.xml";
public static string getText(string text)
{
if(ht==null){
init();
}
return (string)ht[text];
}
public static void init()
{
ht = new Hashtable();
string strXmlPath = path;
XmlDocument xDoc = new XmlDocument();
xDoc.Load(@strXmlPath);
//node数量
int count = xDoc.DocumentElement.ChildNodes.Count;
//遍历所有的node
for (int k = 0; k < count; k++)
{
XmlElement pressEle = (XmlElement)xDoc.DocumentElement.ChildNodes[k];
XmlElement pressEleKey;
XmlElement pressEleValue;
pressEleKey = (XmlElement)pressEle.ChildNodes[0];
pressEleValue = (XmlElement)pressEle.ChildNodes[1];
string key = pressEleKey.FirstChild.Value;
string value = pressEleValue.FirstChild.Value;
ht.Add(key, value);
}
}
}
}
注释：加上@标示绝对路径。
@strXmlPath
xml文件格式：
<list>
<node>
<key>language</key>
<value>java,oralce,jajaja,javascript,vb</value>
</node>
</list>
part2：我的asp的cs文件，调用上面的类：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace com.Origin.Base.test
{
public partial class TestWeb : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
public static string getText(string s)
{
string properties = ReadProperty.getText(s);
return properties;
}
}
}
注释：提供getText方法，共界面asp调用。
asp调用该方法和我们的js公有库。
JS文件：
//test.js
function fun(formId, availableTags) {
alert('in fun');
$(formId).autocomplete({
source: availableTags
});
}
最后是asp的界面文件：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="com.Origin.Base.test.TestWeb" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.6.4.js"></script>
<script type="text/javascript" src="Scripts/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="Scripts/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="Scripts/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="Scripts/ui/jquery.ui.autocomplete.js"></script>
<script type="text/javascript">
$(function () {
var v1 = '<%=getText("language")%>';
alert(v1);
v = v1.split(",");
fun("#tags", v);
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
<!-- End demo -->
</body>
</html>
注释： $(function (){});会让function中的内容立即执行。
【各种报错录】
1。$(formId).autocomplete
is not a function
solution：把jquery的js文件引入放在一堆scrpt的引入的最后即解决。JS的引入是又顺序的，童鞋们注意。
2。字符文本的字符太多
var v1 = '<%=getText("
language"
)%>';
solution：上面的双引号写成了单引号。。不靠大家spread the world 的精神，还真不知道.NET报的个啥错。
附件是用到的jquery文件。
分享到：
相关推荐
《jQuery自动完成输入插件——实现高效用户交互体验》 在网页开发中，提供便捷的用户输入体验至关重要，其中一种常见的方法就是使用自动完成输入功能。jQuery作为一个轻量级、功能丰富的JavaScript库，为开发者提供...
第二部分 基础篇 第3章 Android程序设计基础 3.1 Android程序框架 3.1.1 Android项目目录结构 3.1.2 Android应用解析 3.2 Android的生命周期 3.3 Android程序U设计 3.4 小结 第4章 用户界面开发 ...
第二部分 基础篇 第3章 Android程序设计基础 3.1 Android程序框架 3.1.1 Android项目目录结构 3.1.2 Android应用解析 3.2 Android的生命周期 3.3 Android程序U设计 3.4 小结 第4章 用户界面开发 ...
第二部分 基础篇 第3章 Android程序设计基础 3.1 Android程序框架 3.1.1 Android项目目录结构 3.1.2 Android应用解析 3.2 Android的生命周期 3.3 Android程序U设计 3.4 小结 第4章 用户界面开发 4.1 用户界面开发...
第二部分 基础篇 第3章 Android程序设计基础 3.1 Android程序框架 3.1.1 Android项目目录结构 3.1.2 Android应用解析 3.2 Android的生命周期 3.3 Android程序U设计 3.4 小结 第4章 用户界面开发 4.1 用户界面开发...
【前端项目-jquery.postcodify.zip】是一个包含前端开发资源的压缩包，主要涉及的是一个基于jQuery的插件——Postcodify。这个插件专为韩国的地理信息搜索设计，目的是帮助用户方便地查找韩国的街道地址和邮政编码。...
第2章 jQuery 选择器/12 2.1 jQuery选择器概述/13 2.1.1 什么是选择器/13 2.1.2 选择器的优势/13 2.2 jQuery选择器详解/17 2.2.1 基本选择器/18 2.2.2 层次选择器/20 2.2.3 简单过滤选择器/22 2.2.4 内容...
2. **安装常用插件**：如"autocomplete-python"（Python代码补全）、"linter-eslint"（JavaScript代码检查）、"git-plus"（增强Git操作）等。 3. **设置快捷键**：根据自己的习惯配置快捷键，可以提高编程速度。 4. ...
{ "filter": "select", "targets": [2] } // 第2列使用下拉框进行过滤 ] } ); } ); ``` 在上面的代码中，我们指定了不同列的过滤方式，例如输入框或下拉框。这样，用户就可以在每列的顶部看到相应的过滤元素，并...