easyui的combobox根据后台数据实现自动输入提示功能

简介:
+关注继续查看

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
相关文章
EasyUI+JavaWeb奖助学金管理系统[7]-EasyUI经典后台管理系统布局实现
本文目录 1. 本章任务 2. 引入EasyUI 3. 顶部标题栏 4. 左侧导航栏 5. 右侧内容栏 6. 底部版权栏 7. 效果
126 0
EasyUI+JavaWeb奖助学金管理系统[7]-EasyUI经典后台管理系统布局实现
相关产品
云迁移中心
推荐文章
更多