FineUI 官方论坛

标题: 利用jquery-ui.js自补全(autocomplete)实现拼音首字母输入汉字实... [打印本页]

作者: 秋收 时间: 2018-4-21 11:14
标题: 利用jquery-ui.js自补全(autocomplete)实现拼音首字母输入汉字实...
利用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;
}

作者: sanshi 时间: 2018-4-21 11:48
给个截图呗，看下效果

作者: 秋收 时间: 2018-4-21 17:09
向下弹出

作者: 秋收 时间: 2018-4-21 17:11
向上弹出

作者: ben74 时间: 2018-5-23 15:03
学习一下，。

作者: ben74 时间: 2018-5-23 16:49

秋收发表于 2018-4-21 17:09
向下弹出

可以发个源文件学习下吗，谢谢

欢迎光临 FineUI 官方论坛 (https://fineui.com/BBS/)