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

发布时间：2020-06-11 10:09:41

来源：51CTO

阅读：1981

作者：crackernet

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

服务端：

getAddress.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

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

json_str = json_str & ","

end if

Next

json_str = json_str & "}"

if k

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.asphtml>

Remote JSON

Remote JSON

This sample shows how to use JSON to retrieve data from a remote site.

var myloader = function(param, success, error) {

var q = param.q || '';

if (q.length

$.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

});

})