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