简易模糊查询tagedit的实现

文章目录
  1. 前端初始化
  2. 服务端

闲着没事,帮别人做了个小东西,分享给大家。

这个小DEMO的主要功能就是实现模糊查询,并把当前选择的条件做为选项添加到文本框,随后一并提交到服务端。我们先看看效果图:

最终效果图

####准备菜(tiao)单(jian)

  • 需要jquery.js 一份
  • 需要jquery.tagedit.js 一份
  • 需要jquery.autoGrowInput一份

前端初始化

必须条件:head头部引入上面所需要的js文件
接着呢,需要一个Input 标签 来初始化。

1
2
3
<div id="tagform-full" style="margin:10px;">
<input type="text" name="tag[]" value="" class="tag" />
</div>

然后就直接初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$("#tagform-full").find('input.tag').tagedit({
autocompleteURL: 'ajax.aspx?action=getData',
checkToDeleteURL: "ajax.aspx?action=deleteData",
allowEdit: true,
allowDelete: true,
direction: "ltr",
animSpeed: 500,
texts: {
removeLinkTitle: '移除当前项.',
saveEditLinkTitle: '保存更改.',
deleteLinkTitle: '从数据库中删除该项.',
deleteConfirmation: '确实是否要删除该项?',
deletedElementTitle: '该项将被直接删除.',
breakEditLinkTitle: '取消'
}
});

服务端

Request["term"].ToString() 就是用来获取前端传递过来的查询条件
其他语言的参考下面方法也可以

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
protected void Page_Load(object sender, EventArgs e)
{
string action = Request["action"] != null ? Request["action"] : string.Empty;
switch (action)
{
case "getData":
getData();
break;
case "deleteData":
deleData();
break;
default:
break;
}
}
private void deleData() {

Response.Write("{ \"success\":true, \"allowDelete\": true}");
Response.End();
}
private void getData() {
StringBuilder json = new StringBuilder();
json.Append("[");
for (int i = 1; i < 100; i++)
{
json.Append("{\"id\":\"" + i+ "\",\"label\":\"" + Request["term"].ToString()+ "--peng--" + i+ "\",\"value\":\"" + Request["term"].ToString() + "--peng--" + i + "\"}");
if (i <99)
{
json.Append(",");
}
}
json.Append("]");
Response.Write(json.ToString());
Response.End();
}

####重要参数说明
这里我只对一些常用的参数做了说明,其余的没用到的就不阐述了。

  • autocompleteURL: 智能提示请求的URL
  • checkToDeleteURL: 删除选项需要请求的URL
  • allowEdit: 是否允许编辑
  • allowDelete: 是否允许删除
  • animSpeed: 动画加载速度
  • deletedPostfix:需要删除项的后缀
  • addedPostfix:需要增加项的后缀

####补充
另外补充下提交到服务端,当选择好很多查询条件后,页面上会生成很多隐藏的input标签,存放着对应text和value,看下图

每个li中都一个input

当提交后,我们可以通过Request.Form.AllKeys 拿到所有传递过来的表单参数,然后判断下tag 就是我们需要的

1
2
3
4
5
6
7
8
9
10
11
12
StringBuilder shtml = new StringBuilder();
shtml.Append("<ul>");
if (Request.Form.AllKeys.Length != 0){
string[] formArray = Request.Form.AllKeys;
foreach (string key in formArray) {
if (key.Contains("tag[")) {
shtml.Append( "<li>key:"+key+";value:"+Request.Form[key]+"</li>");
}
}
}
shtml.Append("</ul>");
Literal1.Text = shtml.ToString();

下面是我点击按钮后,我在服务端取到了所有的项,接着输出在前端展现了,另外这里说明下
tag[1-a] ,这里后端用时 还需要做进一步处理,1代表value,-a代表增加的项,addedPostfix 默认为 -a ,我们可以设置为其他的 例如 b,c,d等等,-d 代表需要删除的项,可以通过deletedPostfix设置成其他的,而下图的value 实际上对应的是搜索的 text,并非真正的value!

DEMO就介绍到这里,欢迎大家下载 传送门