利用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

给个截图呗，看下效果

秋收

向下弹出

秋收

向上弹出

ben74

学习一下，。

ben74

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

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