87,904
社区成员
发帖
与我相关
我的任务
分享来个大神帮我看看这JSON的数据怎么处理
后台的JSON数据应该没问题。
需要做一个自动完成框功能，后台做的多，不会JS，来个大手帮帮忙，下面有代码，来点简单粗暴直接告诉我怎么改。
文本框输入3位数开始提示，提示内容的前三位和文本框三位数字一样。
下面贴代码，如果下面找的这JS能改，大神帮忙一下，如果不能改，能不能有请各位大仙粗暴的仍个JS给我，小弟拜谢。
需要做一个自动完成框功能，后台做的多，不会JS，来个大手帮帮忙，下面有代码，来点简单粗暴直接告诉我怎么改。
文本框输入3位数开始提示，提示内容的前三位和文本框三位数字一样。
下面贴代码，如果下面找的这JS能改，大神帮忙一下，如果不能改，能不能有请各位大仙粗暴的仍个JS给我，小弟拜谢。
...全文
请发表友善的回复…
发表回复
公西雒 2016-02-25
- 打赏
- 举报
不懂JS阿，没有真正学过，也就会点简单的皮毛，这JS的代码也是从网上找的
[/quote]
那你就先找个简单的代码弄懂，不学谁都帮不了你。
以下是2，3中涉及的基本知识点：
http://www.w3school.com.cn/js/js_functions.asp
http://www.cnblogs.com/tylerdonet/p/3520862.html
http://www.w3school.com.cn/jsref/event_onchange.asp
[/quote]
那你就先找个简单的代码弄懂，不学谁都帮不了你。
以下是2，3中涉及的基本知识点：
http://www.w3school.com.cn/js/js_functions.asp
http://www.cnblogs.com/tylerdonet/p/3520862.html
http://www.w3school.com.cn/jsref/event_onchange.asp
chi742658817 2016-02-25
- 打赏
- 举报
不懂JS阿，没有真正学过，也就会点简单的皮毛，这JS的代码也是从网上找的
chi742658817 2016-02-24
- 打赏
- 举报
<script type="text/javascript">
//<![CDATA[
var getElementsByClassName = function (searchClass, node, tag) {
node = node || document, tag = tag ? tag.toUpperCase() : "*";
if(document.getElementsByClassName){/* 支持getElementsByClassName的浏览器 */
var temp = node.getElementsByClassName(searchClass);
if(tag=="*"){
return temp;
} else {
var ret = new Array();
for(var i=0; i<temp.length; i++)
if(temp[i].nodeName==tag)
ret.push(temp[i]);
return ret;
}
}else{
var classes = searchClass.split(" "),
elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),
patterns = [], returnElements = [], current, match;
var i = classes.length;
while(--i >= 0)
patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));
var j = elements.length;
while(--j >= 0){
current = elements[j], match = false;
for(var k=0, kl=patterns.length; k<kl; k++){
match = patterns[k].test(current.className);
if(!match) break;
}
if(match) returnElements.push(current);
}
return returnElements;
}
};
var addEvent=(function(){
if(document.addEventListener){
return function(type, fn){ this.addEventListener(type, fn, false); };
}else if(document.attachEvent){
return function(type,fn){
this.attachEvent('on'+type, function () {
return fn.call(this, window.event);/* 兼容IE */
});
};
}
})();
;(function(window){
/* 插件开始 */
var autoComplete=function(o){
var handler=(function(){
var handler=function(e,o){ return new handler.prototype.init(e,o); };
handler.prototype={
e:null, o:null, timer:null, show:0, input:null, popup:null,
init:function(e,o){/* 设置初始对象 */
this.e=e, this.o=o,
this.input=this.e.getElementsByTagName(this.o.input)[0],
this.popup=this.e.getElementsByTagName(this.o.popup)[0],
this.initEvent();/* 初始化各种事件 */
},
match:function(quickExpr,value,source){/* 生成提示 */
var li = null;
for(var i in source){
if( value.length>0 && quickExpr.exec(source[i])!=null ){
li = document.createElement('li');
li.innerHTML = '<a href="javascript:;">'+source[i]+'</a>';
this.popup.appendChild(li);
}
}
if(this.popup.getElementsByTagName('a').length)
this.popup.style.display='block';
else
this.popup.style.display='none';
},
ajax:function(type,url,quickExpr,search){/* ajax请求远程数据 */
var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
xhr.open(type,url,true);/* 同异步在此修改 */
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var that=this;
xhr.onreadystatechange = function(){
if(xhr.readyState==4) {
if(xhr.status==200) {
var data = eval(xhr.responseText);
that.match(quickExpr,search,data);
}else{
alert("请求页面异常!");/* 请求失败 */
}
}
};
xhr.send(null);
},
fetch:function(ajax,search,quickExpr){
var that=this;
this.ajax(ajax.type,ajax.url+search,quickExpr,search);
},
initEvent:function(){/* 各事件的集合 */
var that=this;
this.input.onfocus = function(){
if(this.inputValue) this.value = this.inputValue;
var value=this.value, quickExpr=RegExp('^'+value,'i'), self=this;
var els = that.popup.getElementsByTagName('a');
if(els.length>0) that.popup.style.display = 'block';
that.timer=setInterval(function(){
if(value!=self.value)
value=self.value;
that.popup.innerHTML='';
if(value!=''){
quickExpr=RegExp('^'+value);
if(that.o.source) that.match(quickExpr,value,that.o.source);
else if(that.o.ajax) that.fetch(that.o.ajax,value,quickExpr);
}
}
},200);
};
this.input.onblur = function(){/* 输入框添加事件 */
if(this.value!=this.defaultValue) this.inputValue = this.value;
clearInterval(that.timer);
var current=-1;/* 记住当前有焦点的选项 */
var els = that.popup.getElementsByTagName('a');
var len = els.length-1;
var aClick = function(){
that.input.inputValue = this.firstChild.nodeValue;
that.popup.innerHTML='';
that.popup.style.display='none';
that.input.focus();
};
var aFocus = function(){
for(var i=len; i>=0; i--){
if(this.parentNode===that.popup.children[i]){
current = i;
break;
}
}
//that.input.value = this.firstChild.nodeValue;
for(var k in that.o.elemCSS.focus){
this.style[k] = that.o.elemCSS.focus[k];
}
};
var aBlur= function(){
for(var k in that.o.elemCSS.blur)
this.style[k] = that.o.elemCSS.blur[k];
};
var aKeydown = function(event){
event = event || window.event;/* 兼容IE */
if(current === len && event.keyCode===9)
that.popup.style.display = 'none';
}else if(event.keyCode==40){
current++;
if(current<-1) current=len;
if(current>len){
current=-1;
that.input.focus();
}else{
that.popup.getElementsByTagName('a')[current].focus();
}
}else if(event.keyCode==38){
current--;
if(current==-1){
that.input.focus();
}else if(current<-1){
current = len;
that.popup.getElementsByTagName('a')[current].focus();
}else{
that.popup.getElementsByTagName('a')[current].focus();
}
}
};
for(var i=0; i<els.length; i++){/* 为每个选项添加事件 */
els[i].onclick = aClick;
els[i].onfocus = aFocus;
els[i].onblur = aBlur;
els[i].onkeydown = aKeydown;
}
};
this.input.onkeydown = function(event){
event = event || window.event;/* 兼容IE */
var els = that.popup.getElementsByTagName('a');
if(event.keyCode==40){
if(els[0]) els[0].focus();
}else if(event.keyCode==38){
if(els[els.length-1]) els[els.length-1].focus();
}else if(event.keyCode==9){
if(event.shiftKey==true) that.popup.style.display = 'none';
}
};
this.e.onmouseover = function(){ that.show=1; };
this.e.onmouseout = function(){ that.show=0; };
addEvent.call(document,'click',function(){
if(that.show==0){
that.popup.style.display='none';
}
});/* 处理提示框dom元素不支持onblur的情况 */
}
};
handler.prototype.init.prototype=handler.prototype;
return handler;/* 把内部的处理函数传到外部 */
})();
if(this.length){/* 处理选择多个dom元素 */
for(var a=this.length-1; a>=0; a--){
handler(this[a],o);
}
}else{/* 处理选择一个dom元素 */
handler(this,o);
}
return this;
};
return window.autoComplete = autoComplete;/* 暴露方法给全局对象 */
/* 插件结束 */
})(window);
/* 调用 */
addEvent.call(null,'load',function(){
autoComplete.call( getElementsByClassName('autoComplete'), {
source:['0123','023',123,1234,212,214,'033333','0352342',1987,17563,20932],
//ajax:{ type:'post',url:'./php/fetch.php?search=' },
elemCSS:{ focus:{'color':'black','background':'#ccc'}, blur:{'color':'black','background':'transparent'} },
input:'input',/* 输入框使用input元素 */
popup:'ul'/* 提示框使用ul元素 */
});
});
//]]>
</script>
chi742658817 2016-02-24
- 打赏
- 举报
public static string DataTableJson()
{
DataSet ds = null;
string sql = " SELECT BC_WO_NUM FROM BCODE ";
ds = Phrase.GetDataSetOpenSQL(sql);
DataTable dt = ds.Tables[0];
if (dt.Rows.Count == 0)
{
return "";
}
StringBuilder jsonBuilder = new StringBuilder();
jsonBuilder.Append("[");//转换成多个model的形式
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":\"");
jsonBuilder.Append(dt.Rows[i][j].ToString());
jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]");
// jsonBuilder.Append("}");
return jsonBuilder.ToString();
}公西雒 2016-02-24
- 打赏
- 举报
只能给你个思路，看你的代码，应该是做了个webapi，然后前台ajax调用接口获取数据。
1.先弄明白怎么做接口，和调用（查看Json数据）；
2.ajax怎么调用接口；
3.然后才是你的问题中提的需求：文本框添加onchange事件，判断输入内容的字符串长度大于等于3时，执行步骤2，将数据解析城list显示出来。
