网站首页收藏本站

FineUI 官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

FineUI首页 WebForms - MVC - JavaScript 常见问题 - QQ群 - 十周年征文活动

FineUI(开源版) 下载源代码 - 下载空项目 - 获取ExtJS - 文档 在线示例 - 版本更新 - 捐赠作者 - 教程

FineUIMvc/Core v5.0.0发布(基于像素的响应式布局) FineUIPro v5.0.0发布(10周年纪念版,WebForms) 欢迎加入【三石和他的朋友们】(基础版下载)

查看: 753|回复: 5

利用jquery-ui.js自补全(autocomplete)实现拼音首字母输入汉字实...

[复制链接]
发表于 2018-4-21 11:14:52 | 显示全部楼层 |阅读模式
利用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:48:50 | 显示全部楼层
给个截图呗,看下效果
回复 支持 反对

使用道具 举报

发表于 2018-5-23 16:49:20 | 显示全部楼层

可以发个源文件学习下吗,谢谢
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|FineUI 官方论坛 ( 皖ICP备13005369号-1 )  

GMT+8, 2018-6-18 21:08 , Processed in 0.081967 second(s), 15 queries , Gzip On, MemCache On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表