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

});

})

總結

以上是生活随笔為你收集整理的easyui select ajax,easyui的combobox根据后台数据实现自动输入提示功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。