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

2025-02-09 技术教程

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

getAddress.asp

<%dimmyrs,sqlstr,singleJson,sqlstr2,qSetmyrs=server.CreateObject("adodb.recordset")'q=Replace(Request.QueryString("q"),"'","''")q=request.Item("param")setsingleJson=newMtRecToJsonsqlstr="selectaddressfromcallrecordwhereaddresslike'%"&q&"%'"sqlstr2="selectid,usr,uid,usrType,corpfromusrorderbyid"sqlstr3="selecttop1*fromusrwhere1=2"ifq<>""orq<>nullthenmyrs.Opensqlstr,Conn,1.1elsemyrs.Opensqlstr2,Conn,1.1endifsingleJson.setRecordset(myrs)response.writesingleJson.getListJsonDB()ifnotIsEmpty(myrs)thenifmyrs.State>0thenmyrs.closeendifsetmyrs=nothingendifconn.closesetconn=nothing%>

TypeJson.asp

<%'JSON接口通用类ClassMtRecToJsonprivaterecordsetprivatejson_strprivatemask_fieldsprivateSubClass_Initializeendsub'publicpropertyletsetRecordset(byvalrec)'setrecordset=rec'endproperty'设置值参数为ADODB.recordset对象publicsubsetRecordset(rec)ifTypeName(rec)="Recordset"thensetrecordset=recendifendsub'获得JSONpublicFunctiongetOneJsonDB()dimijson_str="{"ifnotIsEmpty(recordset)thenFori=0Torecordset.fields.count-1json_str=json_str&""""&recordset.fields(i).name&""""json_str=json_str&":"json_str=json_str&""""ifnotrecordset.eofthenjson_str=json_str&recordset.fields(i).valueendifjson_str=json_str&""""ifi<recordset.fields.count-1thenjson_str=json_str&","endifNextendifjson_str=json_str&"}"getOneJsonDB=json_strendfunction'获得JSON格式的listpublicFunctiongetListJsonDB()dimi,kjson_str=json_str&"["ifnotIsEmpty(recordset)thenFork=0Torecordset.recordcount-1ifk>=recordset.pageSizethenExitforIfrecordset.EofThenExitForjson_str=json_str&"{"Fori=0Torecordset.fields.count-1json_str=json_str&""""&recordset.fields(i).name&""""json_str=json_str&":"json_str=json_str&""""ifnotrecordset.eofthenjson_str=json_str&recordset.fields(i).valueendifjson_str=json_str&""""ifi<recordset.fields.count-1thenjson_str=json_str&","endifNextjson_str=json_str&"}"ifk<recordset.recordcount-1thenjson_str=json_str&","endifrecordset.MoveNextnextendifif(Right(json_str,1)=Chr(44))then'查看拼接字符串最后是否有异常(偶尔存在逗号,不知道为什么),如果有就主动添加一个结尾字段json_str=json_str&"""end""]"elsejson_str=json_str&"]"endifgetListJsonDB=json_strendfunctionendclass%>

客户端：

show.asp

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>RemoteJSON</title><linkhref="css/themes/default/easyui.css"rel="stylesheet"/><linkhref="css/themes/icon.css"rel="stylesheet"/><linkhref="css/themes/color.css"rel="stylesheet"/><scripttype="text/javascript"src="script/jquery.min.js"></script><scripttype="text/javascript"src="script/jquery.easyui.min.js"></script><scripttype="text/javascript"src="script/easyui-lang-zh_CN.js"></script></head><body><h3>RemoteJSON</h3><p>ThissampleshowshowtouseJSONtoretrievedatafromaremotesite.</p><div></div><divclass="easyui-panel"><div><inputid="s1"name="s1"class="easyui-combobox"/></div></div><scriptlanguage="javascript">varmyloader=function(param,success,error){varq=param.q||'';if(q.length<2){returnfalse}$.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);//varitems=$.map(data,function(value){//return{//address:value//};//});varitems=$.each(data,function(value){returnthis;//遍历数组中的值});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>