博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
easyui的combobox根据后台数据实现自动输入提示功能
阅读量:6971 次
发布时间:2019-06-27

本文共 5065 字,大约阅读时间需要 16 分钟。

adauhuehkek最近做项目的时候遇到一个需求,需要在录入数据的时候检索已经存在的数据记录,并从中提取相似的数据进行展示并选择,以提高录入效率,简单的说,这个功能有点像在谷歌、百度搜索框里输入一个关键字,然后自动在下边列举出与关键字相似的信息供选择。好啦,现在功能说完了,下边就直入正题,把两种方法都列出来,以供需要的人去选择使用,其实两种方法的区别之处很小,主要是在返回检索结果时调用方法不一样,一种是map(),另一种是each(),这两个方法的区别我就不说了,简单总结就是map()要从建数组,each()直接返回原始数组,基于这一点,在内存开销上显然each()更好一点,当然,这个也不一概而论,看各自需求了。

服务端:

getAddress.asp

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
<!--
#include file="Conn.asp" -->
<!--
#include file="TypeJson.asp" -->
<%
dim myrs,sqlstr,singleJson,sqlstr2,q
Set myrs=server.CreateObject(
"adodb.recordset"
)
 
'q=Replace(Request.QueryString("q"),"'
",
"''"
)
q=request.Item(
"param"
)
 
set singleJson = 
new 
MtRecToJson
 
sqlstr = 
"select address from callrecord where address like'%"
&q&
"%'"
sqlstr2=
"select id,usr,uid,usrType,corp from usr order by id"
sqlstr3=
"select top 1 * from usr where 1=2"
 
if 
q<>
"" 
or q<>
null 
then
 
myrs.Open sqlstr,Conn,1.1
else
 
myrs.Open sqlstr2,Conn,1.1
end 
if
   
singleJson.setRecordset(myrs)
response.write singleJson.getListJsonDB()
if 
not IsEmpty(myrs) then
 
if 
myrs.State>0 then
  
myrs.close
 
end 
if
 
set myrs = nothing
end 
if
conn.close
set conn = nothing
%>

TypeJson.asp

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<%
'JSON 接口通用类
Class MtRecToJson
 
private 
recordset
 
private 
json_str
 
private 
mask_fields
 
private 
Sub Class_Initialize
 
end sub
 
'
public 
property let setRecordset(byval rec)
 
set 
recordset = rec
 
'end property
  
 
'设置值 参数为ADODB.recordset对象
 
public 
sub setRecordset(rec)
   
if 
TypeName(rec)=
"Recordset" 
then
   
set 
recordset = rec
  
end 
if
 
end sub
  
 
'获得JSON
 
public 
Function getOneJsonDB()
  
dim i
   
json_str = 
"{"
   
if 
not IsEmpty(recordset) then
    
For i=
0 
To recordset.fields.count-
1
      
json_str = json_str & 
""
""
&recordset.fields(i).name&
""
""
       
json_str = json_str & 
":"
       
json_str = json_str & 
""
""
       
if 
not recordset.eof then
        
json_str = json_str & recordset.fields(i).value
      
end 
if
       
json_str = json_str & 
""
""
       
if 
i<recordset.fields.count-
1 
then
         
json_str = json_str & 
","
       
end 
if
    
Next
   
end 
if 
   
json_str = json_str & 
"}"
   
getOneJsonDB = json_str
 
end 
function
  
  
'获得JSON 格式的list
 
public 
Function getListJsonDB()
   
dim i,k
   
json_str = json_str & 
"["
   
if 
not IsEmpty(recordset) then
     
For k=
0 
To recordset.recordcount-
1
                
if 
k>=recordset.pageSize then Exit 
for
     
If recordset.Eof Then Exit For
            
json_str = json_str & 
"{"
        
For i=
0 
To recordset.fields.count-
1
       
json_str = json_str & 
""
""
&recordset.fields(i).name&
""
""
            
json_str = json_str & 
":"
            
json_str = json_str & 
""
""
            
if 
not recordset.eof then
             
json_str = json_str & recordset.fields(i).value
           
end 
if
            
json_str = json_str & 
""
""
            
if 
i<recordset.fields.count-
1 
then
              
json_str = json_str & 
","
            
end 
if
        
Next
        
json_str = json_str & 
"}"
        
if 
k<recordset.recordcount-
1 
then
            
json_str = json_str & 
","
        
end 
if
                
recordset.MoveNext
    
next
   
end 
if 
   
if
(Right(json_str,
1
)=Chr(
44
)) then'查看拼接字符串最后是否有异常(偶尔存在逗号,不知道为什么),如果有就主动添加一个结尾字段
      
json_str = json_str & 
""
"end"
"]"
      
else
      
json_str = json_str & 
"]"
   
end 
if
   
getListJsonDB = json_str
 
end 
function 
  
end 
class
%>

客户端:

show.asp

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
    
<meta charset=
"UTF-8"
>
    
<title>Remote JSON</title>
    
<link href=
"css/themes/default/easyui.css" 
rel=
"stylesheet" 
/>
    
<link href=
"css/themes/icon.css" 
rel=
"stylesheet" 
/>
    
<link href=
"css/themes/color.css" 
rel=
"stylesheet" 
/>
    
<script type=
"text/javascript" 
src=
"script/jquery.min.js"
></script>
    
<script type=
"text/javascript" 
src=
"script/jquery.easyui.min.js"
></script>
    
<script type=
"text/javascript" 
src=
"script/easyui-lang-zh_CN.js"
></script>
</head>
<body>
    
<h2>Remote JSON</h2>
    
<p>This sample shows how to 
use 
JSON to retrieve data from a remote site.</p>
    
<div style=
"margin:20px 0"
></div>
    
<div 
class
=
"easyui-panel" 
style=
"width:100%;max-width:400px;padding:30px 60px;"
>
        
<div style=
"margin-bottom:20px"
>
            
<input id=
"s1" 
name=
"s1" 
class
=
"easyui-combobox" 
style=
"width:100%;"
/>
        
</div>
 
    
</div>
    
<script language=
"javascript"
>
        
var 
myloader = 
function
(param, success, error) {
            
var 
q = param.q || 
''
;
            
if 
(q.length < 
2
) { 
return 
false 
}
            
$.ajax({
                
type: 
'post'
,
                
url: 
'getAddress.asp'
,
                
dataType: 
'json'
,
                
//contentType: 'application/x-www-form-urlencoded:charset=UTF-8',
                
data: { param: q },
                
success: 
function
(data) {
                    
//alert(data);
                    
// var items = $.map(data, function(value) {
                    
//   return {
                    
//    address: value
                    
// };
                    
// });
                    
var 
items = $.
each
(data, 
function
(value) {
                        
return 
this
//遍历数组中的值    
                    
});
                    
success(items);
//调用loader的success方法,将items添加到下拉框中
                
},
                
error: 
function
() {
                    
error.apply(
this
);
                
}
            
});
        
}
 
        
$(
function
() {
        
$(
'#s1'
).combobox({
                         
loader: myloader,
                         
mode: 
'remote'
,
                         
valueField: 
'address'
,
                         
textField: 
'address'
,
                         
editable:
'true'
,
                         
hasDownArrow: 
false
            
});
        
})
    
</script>
</body>
 
 
</html>
本文转自问道博客51CTO博客,原文链接http://blog.51cto.com/450236/1836605如需转载请自行联系原作者
   crackernet
你可能感兴趣的文章
Remove Element
查看>>
高淇Struts2.0教程之视频笔记(7)
查看>>
自适应SimpsonSimpson积分
查看>>
初学WebGL引擎-BabylonJS:第2篇-基础模型体验
查看>>
Python的垃圾回收机制以及引用计数
查看>>
C语言经典实例1: 类型长度与类型转换
查看>>
用DateTime.ToString(string format)输出不同格式的日期
查看>>
[转July]KMP算法(mark)
查看>>
mysql获取表列信息、主键信息
查看>>
用POI的HSSF来控制EXCEL的研究
查看>>
jvm09
查看>>
require标识符分析
查看>>
随手记
查看>>
基础JSP学习
查看>>
C# try catch语句&获取随机数的方法
查看>>
第一个shell编程,输出hello world!
查看>>
LinearLayout的layout_gravity失效问题
查看>>
JS中的prototype
查看>>
html添加小图标
查看>>
Outdated Kotlin Runtime
查看>>