利用jquery-ui.js自补全(autocomplete)实现拼音首字母输入汉字实例代码
在FineUIPro中使用jquery-ui.js实现自动补全功能，其实现方式与FineUI中使用的jquery.autocomplete.js中的autocomplete不兼容
下面为在FineUIPro中使用jquery-ui.js实现自动补全实例代码
var basePath = '<%= ResolveUrl("~/") %>';
function AjaxJSON(term1) {//用于同步方式一次性取得全部JSON数据，以便重复利用（需先定义Cache变量JSONcache）
var JSONcache = {};
$.ajaxSetup({ async: false }); //指定 ajax 以同步方式工作 或$.ajaxSettings.async = false;
$.getJSON(basePath+"PinYinAutoComplete/AjaxPage.ashx?term=" + term1, '', function (data, status, xhr) {
JSONcache = data;//JSON.stringify(data);
});
return JSONcache;
}
var JSONcache =AjaxJSON('SQL查询....');//后台返回的JSON全部数据，其格式如下：
/*
JArray ja = new JArray();
foreach (DataRow row in dt.Rows)
{
//主要是传递的json数据需要有id,value,Label属性,label中可以加入html进行高亮,value是选中后在输入框输入的值,所以需要设置原值,不能加入html
if (row["OrgName"].ToString().Trim()!="") {
JObject jo = new JObject();
//jo.Add("id", row["FirstPinYin"].ToString());//选中后，填充到id里面的值
jo.Add("value", row["OrgName"].ToString());//选中后，填充到下拉框的值
jo.Add("label", row["FirstPinYin"].ToString() + "." + row["OrgName"].ToString());//下拉框显示值 或搜索比较值
ja.Add(jo);
}
}
//其中row["FirstPinYin"].ToString()为拼音首字母，row["OrgName"].ToString()为对应的汉字
*/
function AutoComp(val_ID, JSONcache, H) {
//将JSON数据JSONcache与指定控件val_ID绑定，以实现自动补全
//val_ID指定控件客户端ID,H小于0时向上弹出，H大于0时向下弹出
if (JSONcache==null) return;
var pMy='left top';
var pAt='left bottom';
if (H<=0) {
pMy='left bottom';
pAt='left top';
}
$('#' + val_ID + ' input').autocomplete({
minLength: 0,
width: 248,//指定下拉框的宽度. Default: input元素的宽度
fillin: true,//
matchCase: false,
matchContains: true,//决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用
position : {
//设定下拉列表的定位点，即at属性会以这个点为参照物，设定下拉列表相对于输入框的位置
//第一个值是水平方向，可选left,right,center
//第二个值是竖直方向，可选left,right,center
my : pMy,
//设定相对位置 bottom
at : pAt
},
source: function (request, response) {
var term = request.term.replace(' ','');
response($.ui.autocomplete.filter(JSONcache, term ), function (item) {
return {
label: item.label, // + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
value: item.value
}
});
},
focus : function(event, ui) {
//console.log("focus:" + ui.item.value);
},
//当文本框内容修改后失去焦点时触发该事件，也可以使用绑定的方式将该事件绑定到提示框上
//autocomplete.on("autocompletechange",function(event,ui){});
//ui.item代表你选中的那一项的对象，包含label和value属性，如果没选中ui.item为null
change : function(event, ui) { //当文本框内容修改后失去焦点时触发该事件
if (ui.item == null) {
//console.log("No Choose");
} else {
//console.log("Choose" + ui.item.value);
}
},
select: function (event, ui) {
var t=F(val_ID).getValue();
F(val_ID).setValue(ui.item.value);
if (t!=ui.item.value) { //按下回车时，当文本框内容发生改变，且未失去焦点时
__doPostBack(val_ID, ui.item.value);//向后台发送一个消息
}
return false;
}
}).autocomplete('instance')._renderItem = function (ul, item) {
return $("<li>")
.append("<a><span class='autocomplete-item-title'>" + item.value + "</span></a>")
.appendTo(ul);
};
}
在.CSS文件可定义弹出选择列表高度
.ui-autocomplete {
max-height: 210px;
/* 弹出选择列表高度 */
overflow-y: auto;
/* 防止水平滚动条 */
overflow-x: hidden;
border: 1px solid #0026ff;
border-radius: 0px 3px 3px 0px;
background-color: #ADD8E6;
z-index:99999;
}
|
发表于 2018-4-21 11:14:52
发表于 2018-4-21 11:48:50
楼主
