<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>html相关代码
<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>css相关代码
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);
}
};相关js代码,InputAndSelect.js
@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();
}java后端
