后台返回数组代码
页面代码基本没啥变化。。
因为与其他 js 冲突了 。。 修改了部分
<script language="javascript">
var chuliNum = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
}
var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
}
function AutoComplete(obj,autoObj,arr){
this.obj=chuliNum(obj); //输入框
this.autoObj=chuliNum(autoObj);//DIV的根节点
this.value_arr=arr; //不要包含重复值
this.index=-1; //当前选中的DIV的索引
this.search_value=""; //保存当前搜索的字符
}
AutoComplete.prototype={
//初始化DIV的位置
init : function() {
this.autoObj.style.left = this.obj.offsetLeft + "px";
this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight+ "px";
this.autoObj.style.width = this.obj.offsetWidth - 2 + "px";//减去边框的长度2px
},
//删除自动完成需要的所有DIV
deleteDIV : function() {
while (this.autoObj.hasChildNodes()) {
this.autoObj.removeChild(this.autoObj.firstChild);
}
this.autoObj.className = "auto_hidden";
},
//设置值
setValue : function(_this) {
return function() {
_this.obj.value = this.seq;
_this.autoObj.className = "auto_hidden";
}
},
//模拟鼠标移动至DIV时，DIV高亮
autoOnmouseover : function(_this, _div_index) {
return function() {
_this.index = _div_index;
var length = _this.autoObj.children.length;
for (var j = 0; j < length; j++) {
if (j != _this.index) {
_this.autoObj.childNodes[j].className = 'auto_onmouseout';
} else {
_this.autoObj.childNodes[j].className = 'auto_onmouseover';
}
}
}
},
//更改classname
changeClassname : function(length) {
for (var i = 0; i < length; i++) {
if (i != this.index) {
this.autoObj.childNodes[i].className = 'auto_onmouseout';
} else {
this.autoObj.childNodes[i].className = 'auto_onmouseover';
this.obj.value = this.autoObj.childNodes[i].seq;
}
}
},
//响应键盘
pressKey : function(event) {
var length = this.autoObj.children.length;
//光标键"↓"
if (event.keyCode == 40) {
++this.index;
if (this.index > length) {
this.index = 0;
} else if (this.index == length) {
this.obj.value = this.search_value;
}
this.changeClassname(length);
}
//光标键"↑"
else if (event.keyCode == 38) {
this.index--;
if (this.index < -1) {
this.index = length - 1;
} else if (this.index == -1) {
this.obj.value = this.search_value;
}
this.changeClassname(length);
}
//回车键
else if (event.keyCode == 13) {
this.autoObj.className = "auto_hidden";
this.index = -1;
} else {
this.index = -1;
}
},
//程序入口
start : function(event) {
if (event.keyCode != 13 && event.keyCode != 38
&& event.keyCode != 40) {
this.init();
this.deleteDIV();
this.search_value = this.obj.value;
var valueArr = this.value_arr;
valueArr.sort();
if (this.obj.value.replace(/(^\s*)|(\s*$)/g, '') == "") {
return;
}//值为空，退出
try {
var reg = new RegExp("(" + this.obj.value + ")", "i");
} catch (e) {
return;
}
var div_index = 0;//记录创建的DIV的索引
for (var i = 0; i < valueArr.length; i++) {
if (reg.test(valueArr[i])) {
var div = document.createElement("div");
div.className = "auto_onmouseout";
div.seq = valueArr[i];
div.onclick = this.setValue(this);
div.onmouseover = this.autoOnmouseover(this, div_index);
div.innerHTML = valueArr[i].replace(reg,
"<strong>$1</strong>");//搜索到的字符粗体显示
this.autoObj.appendChild(div);
this.autoObj.className = "auto_show";
div_index++;
}
}
}
this.pressKey(event);
window.onresize = Bind(this, function() {
this.init();
});
}
}
</script>
页面调用部分
<p><span>活动举办场地</span>
<span>
<input type="text" onkeyup="findResult(this,'auto',event)" id="activityAddress" name="activityAddress" placeholder="请输入中文地址">
<!-- <input type="text" onkeyup="autoComplete1.start(event)" id="activityAddress1" name="activityAddress" placeholder="请输入中文地址">
--> </span>
<a id="addButton" class="addAclass" onclick="getAddressFill();">添加场地</a>
<span class="hint2 " id="activityAddressError" ><img src="<c:url value='/resources/risk/images/public/pss_wrong.png' />"/>地址不能为空</span>
</p>
<div class="auto_hidden" id="auto"><!--自动完成 DIV--></div>
<div id="addressmore" >
</div>
调用js
var addressNum=0;
// var autoComplete2,autoComplete1;
function getAddressFill(){
addressNum++;
var strName="activityAddress"+addressNum;
var autoName="auto"+addressNum;
var str="<div class='rep'><div class='clear'></div><p><span> </span><span> <input type='text' onkeyup=\"findResult(this,'"+autoName+"',event)\" id='"+strName+"' name='activityAddress' placeholder='请输入更多的举办地址'/><div class='auto_hidden' id='"+autoName+"'></div></span><a class='addAclass' onclick=\"sys_remove_element($(this),'rep','');\">删除场地</a> </p></div>";
$("#addressmore").append(str);
// if(addressNum=="1" || addressNum==1){
// autoComplete1 = new AutoComplete('activityAddress1','auto1',['b111','b12','b22','b3','b4','b5','b6','b7','b8','b2','abd','ab','acd','accd','b1','cd','ccd','cbcv','cxf']);
// }
// if(addressNum=="2"){
// autoComplete2=new AutoComplete('activityAddress2','auto2',['b111','b12','b22','b3','b4','b5','b6','b7','b8','b2','abd','ab','acd','accd','b1','cd','ccd','cbcv','cxf']);
// }
}
function findResult(obj,autoId,event){
//alert("jinalai");
var city =$("#city").val();
var province =$("#province").val();
//var address= $("#activityAddress").val();
var address=obj.value;
var html="";
if(city!=""&&city!="请选择市"){
$("#activityAddressError").hide();
$.ajax({
url:baseUrl+'/findAddress.json',
data:{
'name':address,
'city':city,
'province':province
},
type:'post', //数据发送方式
async: false,
dataType : "json",
success: function(data){
var myArray=new Array();
for(var i=0;i<data.searchName.length;i++){
myArray.push(data.searchName[i].address);
}
$("#addButton").show();
var autoComplete1 = new AutoComplete(obj,autoId,myArray);
autoComplete1.start(event);
}
});
}
}
<script>
var autoComplete=new AutoComplete('activityAddress','auto',['中国','b12','b22','b3','b4','b5','b6','b7','b8','b2','abd','ab','acd','accd','b1','cd','ccd','cbcv','cxf']);
</script>
后台调用代码
@RequestMapping(value = "/findAddress")
public JSONObject findAddressView(String name ,String city,String province) {
List<DedecmsAddress> list=new ArrayList<DedecmsAddress>();
// List<String> list1=new ArrayList<String>();
// list1.add("中国好声音");
// list1.add("中国好声音1");
// list1.add("中国好声音2");
// list1.add("中国好声音3");
if(city==null||city==""){
return null;
}
city=dataService.findRegionByCode(city).getName();
// //System.out.println(city);
province=dataService.findRegionByCode(province).getName();
if(city.equals("市辖区")||city.equals("县")){
//直接查询 省下的 地址
list=cmsService.findCmsList(province,null);
}else{
list=cmsService.findCmsList(province,city);
}
JSONArray array=new JSONArray();
String []arrayNum= new String[8];//默认只有8个
JSONObject json= new JSONObject();
for (int i = 0; i < list.size(); i++) {
JSONObject address= new JSONObject();
address.put("address", list.get(i).getAddress());
array.add(address);
}
json.put("searchName", array);
// array.add(json);
// System.out.println(array.toString());
return json;
}
