模糊查询+首字母查询组合框

 

<span class="label">站名称:</span>
        <div id="selectMain"  >
                      <input id="myInputOne"   name="Q_bdzmc_S" 
                              onkeyup="InputAndSelect.keyupPySearch1('myUl','myInputOne','suggest','selectStation','myInputTwo');" 
                          onblur="InputAndSelect.isInputing = false;InputAndSelect.blurPySearch('suggest','myInputOne','请输入站或站首字母');"  
                              onfocus="InputAndSelect.focusPySearch(this,'suggest','myInputOne','请输入站或站首字母');"
                          >
                      <div id="suggest" > 
                        <ul  id="myUl" ></ul>
                    </div> 
                      <input type="hidden" id="myInputTwo" name="myInputTwo"   >
            </div>

 

<style>
#myUl {
    padding: 0;
    margin: 0;
    list-style: none;
    padding-left: 3px;
    cursor: pointer;
    line-height: 25px;
    text-align: left;
    overflow: auto;
    overflow-x: hidden;
/*     background-color: blue; */
    background-color: white;
    max-height: 150px;
}

#suggest {
    padding: 0;
    list-style: none;
    cursor: pointer;
    line-height: 25px;
    text-align: left;
    position: absolute;
    width: 185px;
    background-color: yellow;
}

#myInputOne {
    width: 185px;
    position: relative;
/*     float: center; */
display: inline-block
    background-color: red;
}

#selectMain {
    position: relative;
    z-index: 99999;
    width: 200px;
/*     background: gray; */
    background: white;
    display: inline-block
}
</style>

 

InputAndSelect = {
    isSelecting : false,
    isInputing : false,
    /**
     * 初始化拼音检索数据源
     * @param myUl 下拉列表ul的id
     * @param myInputOne 下拉列表输入框id（如用户名的ID）
     * @param suggest 下拉列表ul父节点div的id
     * @param inputVal 下拉输入框输入内容
     * @param type 类型，选择用户、功能模块、功能名称
     * @param myInputTwo 选择用户时 对应的是存储userId的字段
     * 
     * InputAndSelect.initPyDataSource(myUl, myInputOne, suggest,$("#"+myInputOne).val(),type,myInputTwo);
     */
    initPyDataSource : function(myUl, myInputOne, suggest,inputVal, type, myInputTwo) {
        
        //先清空ul
        // 拼音检索下拉列表对象
        var dataSourceList = document.getElementById(myUl);
        // 初始化自定义组合框下拉框数据
        dataSourceList.innerHTML = "";
        
        if (type == 'selectxxx') {
        } else if (type == 'selectStation') {
            InputAndSelect.selectStation(myUl, myInputOne,suggest, inputVal, myInputTwo);
        }
    },
    
    
    /**
     * 初始化拼音检索数据源(选择变电站)
     * @param myUl 下拉列表ul的id
     * @param myInputOne 下拉列表输入框id
     * @param suggest 下拉列表ul父节点div的id
     * @param inputVal 下拉输入框输入内容
     */
    selectStation:function(myUl,myInputOne,suggest,inputVal,myInputTwo){
//        alert(1);
        if(inputVal==''){
            return;
        }
        $.ajax({
            type:"post",
            url : __ctx+"/ytdyjcompare/Ytdyjykzzb/ytdyjykzzb/getResourceName_CZ.ht",
            data : {"name" : inputVal },
            dataType : "json",
            success : function(data){
                //拼音检索下拉列表对象
                var dataSourceList = document.getElementById(myUl);
                dataSourceList.innerHTML = "";
                //var myData = eval("("+data+")");
                var myData = InputAndSelect.getRealJsonData(data);
                //alert(myData);
                if(myData!=null && myData!='' && myData.length>0){
                    for (var i=0,xlbhLen=myData.length; i<xlbhLen; i++){
                        var obj = myData[i];
                        var li = document.createElement("li");
                        li.lang = i;
                        li.jp = '';
//                        li.innerHTML = decodeURIComponent(ms);
                        li.innerHTML =obj;
//                        li.id=czm;
                        li.id=obj;
//                        li.title=ms;
                        li.title=obj;
                        li.style.backgroundColor = "#FFFFFF";
                        li.onclick = function() {
                            document.getElementById(myInputOne).value = this.title;
                            document.getElementById(myInputTwo).value = this.id;
                            document.getElementById(suggest).style.display = "none";
                            document.getElementById(myUl).style.display = "none";
                        }
                        li.onmouseover = function() {
                            this.style.backgroundColor = "#EFEFEF";
                            this.style.fontWeight = "bold";
                        }
                        li.onmouseout = function() {
                            this.style.backgroundColor = "#FFFFFF";
                            this.style.fontWeight = "normal";
                        }
                        dataSourceList.appendChild(li);
                    }
                }else{
                    var li1 = document.createElement("li");
//                    li1.innerHTML = decodeURIComponent("没有添加模版,请联系管理员!");
                    li1.onclick = function() {
                        document.getElementById(suggest).style.display = "none";
                    }
                    dataSourceList.appendChild(li1);
                }
            }
        });
    },
     getRealJsonData:function(baseStr) {
        if (!baseStr || typeof baseStr != 'string') return;
        var jsonData = null;
        try {
            jsonData = JSON.parse(baseStr);
        } catch (err){
            return null;
        }
        var needReplaceStrs = [];
        InputAndSelect.loopFindArrOrObj(jsonData,needReplaceStrs);
        needReplaceStrs.forEach(function (replaceInfo) {
            var matchArr = baseStr.match(eval('/"'+ replaceInfo.key + '":[0-9]{15,}/'));
            if (matchArr) {
                var str = matchArr[0];
                var replaceStr = str.replace('"' + replaceInfo.key + '":','"' + replaceInfo.key + '":"');
                replaceStr += '"';
                baseStr = baseStr.replace(str,replaceStr);
            }
        });
        var returnJson = null;
        try {
            returnJson = JSON.parse(baseStr);
        }catch (err){
            return null;
        }
        return returnJson;
    },
    //遍历对象类型的
     getNeedRpStrByObj:function(obj,needReplaceStrs) {
        for (var key in obj) {
            var value = obj[key];
            if (typeof value == 'number' && value > 9007199254740992){
                needReplaceStrs.push({key:key});
            }
            InputAndSelect.loopFindArrOrObj(value,needReplaceStrs);
        }
    },

    //遍历数组类型的
     getNeedRpStrByArr:function(arr,needReplaceStrs) {
        for(var i=0; i<arr.length; i++){
            var value = arr[i];
            InputAndSelect.loopFindArrOrObj(value,needReplaceStrs);
        }
    },

    //递归遍历
     loopFindArrOrObj:function(value,needRpStrArr) {
        var valueTypeof = Object.prototype.toString.call(value);
        if (valueTypeof == '[object Object]') {
            needRpStrArr.concat(InputAndSelect.getNeedRpStrByObj(value,needRpStrArr));
        }
        if (valueTypeof == '[object Array]') {
            needRpStrArr.concat(InputAndSelect.getNeedRpStrByArr(value,needRpStrArr));
        }
    },
    
    /**
     * 自定义组合框的输入框keyup事件处理函数
     * @param p_obj 输入框对象
     * 
     * InputAndSelect.keyupPySearch(this,'suggest','myInputOne')
     * 
     * 经过测试，感觉此方法暂时没有什么用处
     */
    keyupPySearch : function(p_obj,suggest,myInputOne) {
        //拼音检索数据源div和列表对象
        var dataSourceDiv = document.getElementById(suggest);
        var dataSourceList = document.getElementById(myInputOne);
        var dataSourceChildList = dataSourceList.childNodes.length;
        var isExists = false;

        //如果输入框为空则显示数据源列表
        if (p_obj.value == "" || /\s/.test(p_obj.value)) {
            dataSourceDiv.style.display = "block";
            for ( var j = 0; j < dataSourceChildList; j++) {
                dataSourceList.childNodes[j].style.display = "block";
            }
        }
        if (dataSourceChildList > 0) {
            for (var i = 0; i < dataSourceChildList; i++) {
                var dataSourceChild = dataSourceList.childNodes[i];
                //输入的简拼或者名称在数据源中存在则显示，反之
                if (dataSourceChild.jp.indexOf(p_obj.value) == 0 || dataSourceChild.innerHTML.indexOf(p_obj.value) != -1) {
                    isExists = true;
                    dataSourceChild.style.display = "block";
                } else {
                    dataSourceChild.style.display = "none";
                }
            }
            if (isExists) {
                dataSourceDiv.style.display = "block";
            } else {
                dataSourceDiv.style.display = "none";
            }
        }
    },
    
    
    /**
     * 作用：鼠标点击输入框后，判断输入框的值，如果值还是提示信息“请输入站或站首字母”，则清空
     * 自定义组合框的输入框focus事件处理函数
     * @param p_obj 输入框对象
     * 
     *     οnfοcus="InputAndSelect.focusPySearch(this,'suggest','myInputOne','请输入站或站首字母');" 
     */
    focusPySearch : function(p_obj,suggest,myInputOne,tipVal) {
        InputAndSelect.isInputing = true;
        InputAndSelect.isSelecting = false;
        if (p_obj.value == tipVal) {
            p_obj.value = "";
        }
        //document.getElementById(searchId).onkeyup();
        
        
        //$("#"+myInputOne).keyup();
        //document.getElementById(suggest).style.display = "block";
    },

    /**
     * 作用：鼠标离开输入框时，给输入框提示信息   “请输入变电站或变电站首字母”
     * 
     * 自定义组合框的输入框blur事件处理函数
     *     οnblur="InputAndSelect.isSelecting = false;
     * InputAndSelect.blurPySearch('suggest','myInputOne','请输入变电站或变电站首字母');"
     * 
     */
    blurPySearch : function(suggest,searchId,tipVal) {
        //获取输入框对象
        var inputObj = document.getElementById(searchId);
        if (inputObj.value == "") {
            inputObj.value = tipVal;
        }
        
        setTimeout(function() {
            if (!InputAndSelect.isInputing && !InputAndSelect.isSelecting){
                document.getElementById(suggest).style.display = "none";
            }
        }, 250);
    },
    
    
    /**
     *<input id="ms"         οnkeyup="InputAndSelect.keyupPySearch1('myUl','myInputOne','suggest','selectStation','myInputTwo');
     *InputAndSelect.keyupPySearch(this,'suggest','myInputOne')"
     * 
     */
    keyupPySearch1: function(myUl,myInputOne,suggest,type,myInputTwo){
        InputAndSelect.initPyDataSource(myUl, myInputOne, suggest,$("#"+myInputOne).val(),type,myInputTwo);
    }
};

 

       @ResponseBody
        @RequestMapping("getResourceName_CZ")
        public String getResourceName_CZ(HttpServletRequest request, HttpServletResponse response) throws Exception {
            JSONArray json = new JSONArray();
            String keyWord = request.getParameter("name");

            List<String> list = getStationName_CZ();
            
            //去掉重复站
            Set<String> list2 = new java.util.HashSet<String>();
//            System.out.println("变电站==进来了吗"+keyWord);
            for (int i = 0; i < list.size(); i++) {
//                System.out.println("变电站=="+list.get(i));
                String s = list.get(i);
                if (s.contains("站")) {
                    s=s.substring(0, s.indexOf("站")+1);
                }
                list2.add(s);
            }
            if (list2 != null && !list2.isEmpty()) {
                for (String s : list2) {
                    Pattern pattern = Pattern.compile("^.*" + keyWord + ".*$", Pattern.CASE_INSENSITIVE);
                    if (StringUtil.isNotEmpty(s)&& (pattern.matcher(s).matches()|| pattern.matcher(getFirstSpell(s)).matches())) {
                        json.add(s);
                    }
                }
            }
            return json.toString();
        }


    /**
     * @return 
     * List<String>
     *  查询本地所有站名
     */
    public  List<String>  getStationName_CZ() {
        List<String> list = new ArrayList<String>();
        String sql="select distinct F_BDZMC from W_YTDYJYKCZB";
        List<Map<String,Object>> queryForList = jdbcTemplate.queryForList(sql);
        if (queryForList != null) {
            for(Map<String, Object> map : queryForList){
                Object object = map.get("F_BDZMC");
                if (object!=null) {
                    list.add((String) object);
                }
            }
        }
        return  list;
    }
    
 // 汉字首字母拼音
     public static String getFirstSpell(String wordsStr) {
         StringBuffer pybf = new StringBuffer();
         char[] arr = wordsStr.toCharArray();
         HanyuPinyinOutputFormat hanyuFormat = new HanyuPinyinOutputFormat();
         hanyuFormat.setCaseType(HanyuPinyinCaseType.LOWERCASE);
         hanyuFormat.setToneType(HanyuPinyinToneType.WITHOUT_TONE);
         for (int i = 0; i < arr.length; i++) {
             if (String.valueOf(arr[i]).matches("[\\u4E00-\\u9FA5]+")) {
                 try {
                     String[] temp = PinyinHelper.toHanyuPinyinStringArray(arr[i], hanyuFormat);
                     if (null != temp) {
                         pybf.append(temp[0].charAt(0));
                     }
                 } catch (BadHanyuPinyinOutputFormatCombination e) {
                     e.printStackTrace();
                 }
             } else {
                 pybf.append(arr[i]);
             }
         }
         return pybf.toString().replaceAll("\\W", "").trim();
     }