多个自定义搜搜补全框 -实战
时间：2021-11-10 作者：匿名
多个自定义搜搜补全框 例子
添加多个文本框例子
后台返回数组代码
页面代码基本没啥变化。。
因为与其他 js 冲突了 。。 修改了部分
<script language="javascript">
var chuliNum = function (id) {
return "string" == typeof id ? 域名lementById(id) : id;
}
var Bind = function(object, fun) {
return function() {
return 域名y(object, arguments);
}
}
function AutoComplete(obj,autoObj,arr){
域名=chuliNum(obj); //输入框
域名Obj=chuliNum(autoObj);//DIV的根节点
域名e_arr=arr; //不要包含重复值
域名x=-1; //当前选中的DIV的索引
域名ch_value=""; //保存当前搜索的字符
}
域名otype={
//初始化DIV的位置
init : function() {
域名域名 = 域名etLeft + "px";
域名域名 = 域名etTop + 域名etHeight+ "px";
域名域名h = 域名etWidth - 2 + "px";//减去边框的长度2px
},
//删除自动完成需要的所有DIV
deleteDIV : function() {
while (域名hildNodes()) {
域名veChild(域名tChild);
}
域名sName = "auto_hidden";
},
//设置值
setValue : function(_this) {
return function() {
域名e = 域名;
域名sName = "auto_hidden";
}
},
//模拟鼠标移动至DIV时，DIV高亮
autoOnmouseover : function(_this, _div_index) {
return function() {
域名x = _div_index;
var length = 域名域名th;
for (var j = 0; j < length; j++) {
if (j != 域名x) {
域名dNodes[j].className = \'auto_onmouseout\';
} else {
域名dNodes[j].className = \'auto_onmouseover\';
}
}
}
},
//更改classname
changeClassname : function(length) {
for (var i = 0; i < length; i++) {
if (i != 域名x) {
域名dNodes[i].className = \'auto_onmouseout\';
} else {
域名dNodes[i].className = \'auto_onmouseover\';
域名e = 域名dNodes[i].seq;
}
}
},
//响应键盘
pressKey : function(event) {
var length = 域名域名th;
//光标键"↓"
if (域名ode == 40) {
++域名x;
if (域名x > length) {
域名x = 0;
} else if (域名x == length) {
域名e = 域名ch_value;
}
域名geClassname(length);
}
//光标键"↑"
else if (域名ode == 38) {
域名x--;
if (域名x < -1) {
域名x = length - 1;
} else if (域名x == -1) {
域名e = 域名ch_value;
}
域名geClassname(length);
}
//回车键
else if (域名ode == 13) {
域名sName = "auto_hidden";
域名x = -1;
} else {
域名x = -1;
}
},
//程序入口
start : function(event) {
if (域名ode != 13 && 域名ode != 38
&& 域名ode != 40) {
域名();
域名teDIV();
域名ch_value = 域名e;
var valueArr = 域名e_arr;
域名();
if (域名域名ace(/(^\\s*)|(\\s*$)/g, \'\') == "") {
return;
}//值为空，退出
try {
var reg = new RegExp("(" + 域名e + ")", "i");
} catch (e) {
return;
}
var div_index = 0;//记录创建的DIV的索引
for (var i = 0; i < 域名th; i++) {
if (域名(valueArr[i])) {
var div = 域名teElement("div");
域名sName = "auto_onmouseout";
域名 = valueArr[i];
域名ick = 域名alue(this);
域名useover = 域名Onmouseover(this, div_index);
域名rHTML = valueArr[i].replace(reg,
"<strong>$1</strong>");//搜索到的字符粗体显示
域名ndChild(div);
域名sName = "auto_show";
div_index++;
}
}
}
域名sKey(event);
域名size = Bind(this, function() {
域名();
});
}
}
</script>
页面调用部分
<p><span>活动举办场地</span>
<span>
<input type="text" onkeyup="findResult(this,\'auto\',event)" id="activityAddress" name="activityAddress" placeholder="请输入中文地址">
<!-- <input type="text" onkeyup="域名t(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/域名\' />"/>地址不能为空</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=域名e;
var html="";
if(city!=""&&city!="请选择市"){
$("#activityAddressError").hide();
$.ajax({
url:baseUrl+\'/域名\',
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<域名th;i++){
域名(域名chName[i].address);
}
$("#addButton").show();
var autoComplete1 = new AutoComplete(obj,autoId,myArray);
域名t(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>();
// 域名("中国好声音");
// 域名("中国好声音1");
// 域名("中国好声音2");
// 域名("中国好声音3");
if(city==null||city==""){
return null;
}
city=域名RegionByCode(city).getName();
// //域名tln(city);
province=域名RegionByCode(province).getName();
if(域名ls("市辖区")||域名ls("县")){
//直接查询 省下的 地址
list=域名CmsList(province,null);
}else{
list=域名CmsList(province,city);
}
JSONArray array=new JSONArray();
String []arrayNum= new String[8];//默认只有8个
JSONObject json= new JSONObject();
for (int i = 0; i < 域名(); i++) {
JSONObject address= new JSONObject();
域名("address", 域名(i).getAddress());
域名(address);
}
域名("searchName", array);
// 域名(json);
// 域名tln(域名ring());
return json;
}
