Hi,
Hope you can help me with this one. I'm at my wits end. I'm trying to
create an intelligent edit-box like the
excellent "Customer" one at the URL:
http://munich.schwarz-interactive.de/autocomplete.aspx
I have the back-end code (vb.net) successfully communicating with the
front page. It returns a string.
Problem is though - I'm having problems with the javascript. My
javascript is terrible. Not my forte I'm afraid. It's
the script called: "AutoComplete.j s". I downloaded it from the
following URL and imported it into my code:
http://www.codeplex.com/AjaxProStart...%2fStarterKit%
2fCSharp&change SetId=6175
***** BEGIN BACK-END CODE *****
<AjaxPro.AjaxNa mespace("WebFor m1")_
Public Class WebForm1
Inherits System.Web.UI.P age
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As
System.EventArg s) Handles MyBase.Load
'Put user code to initialize the page here
AjaxPro.Utility .RegisterTypeFo rAjax(GetType(W ebForm1), Me.Page)
End Sub
<AjaxPro.AjaxMe thod()_
Public Function GetUsernameList (ByVal testParam As String) As String
'Get the request query
Dim strQuery As String = testParam
'Create the XML-like string to be sent back to the request
Dim strXmlNames As String = ""
'Dim arrStrNames As String() = {"Ian Suttle", "John Doe", "Alex
Wright", "Albert Einstein", "Sierra Tracy"}
Return arrStrNames
End Function
***** END BACK-END CODE *****
My Web.config looks like this:-
<?xml version="1.0" encoding="utf-8" ?>
<configuratio n>
<system.web>
<httpHandlers >
<add verb="POST,GET" path="ajaxpro/*.ashx"
type="AjaxPro.A jaxHandlerFacto ry, AjaxPro"/>
</httpHandlers>
</system.web>
</configuration>
The problem is though how do I make the string array communicate
successfully with the AutoComplete.js script. I finf
it very confusing. Any help/suggestions/comments/corrections much
appreciated.
Bob
***** BEGIN AutoComplete.js SCRIPT ******
addNamespace("M S.Web.AutoCompl ete");
MS.Web.AutoComp lete = Class.create();
Object.extend(M S.Web.AutoCompl ete.prototype, {
timer: null,
count: 10,
pos: -1,
waitAfterInput: 230,
minChars: 0,
children: null,
changeHighlight : function() {
var l = this.getLength( );
for(var i=0; i<this.count && i<l; i++) {
if(i == this.pos)
this.div.childN odes[i].className = "item selected";
else
this.div.childN odes[i].className = "item"
}
},
getItem: function(idx) {
return null;
},
getLength: function() {
return 0;
},
getDisplay: function(item) {
return item;
},
getValue: function(item) {
return item;
},
hide: function() {
this.div.style. display = "none";
},
show: function() {
this.changeHigh light();
this.div.style. display = "inline";
},
focusTextbox: function() {
this.ele.focus( );
},
select: function() {
if(this.pos -1) {
var v = this.getValue(t his.getItem(thi s.pos));
if(v != this.ele.value) {
this.ele.value = v;
if(this.childre n != null)
for(var i=0; i<this.children .length; i++) {
this.children[i].onparentchange (v);
}
}
}
this.hide();
},
onkeydown: function(e) {
var key = MS.Keys.getCode (e);
switch(key) {
case MS.Keys.TAB:
case MS.Keys.ENTER:
this.select();
if(key == MS.Keys.ENTER) MS.cancelEvent( e);
break;
case MS.Keys.ESC:
this.hide();
break;
case MS.Keys.KEYUP:
if(this.pos 0) this.pos--;
this.changeHigh light();
break;
case MS.Keys.KEYDOWN :
if(this.pos < this.getLength( ) -1 && this.pos <
this.count -1) this.pos++;
this.changeHigh light();
break;
}
},
onkeyup: function(e) {
switch(MS.Keys. getCode(e)) {
case MS.Keys.TAB:
case MS.Keys.ENTER:
case MS.Keys.ESC:
case MS.Keys.KEYUP:
case MS.Keys.KEYDOWN :
case MS.Keys.KEYLEFT :
case MS.Keys.KEYRIGH T:
case MS.Keys.ALT:
case MS.Keys.SHIFT:
case MS.Keys.CTRL:
break;
default:
if(this.ele.val ue.length < this.minChars)
return false;
if(this.timer != null) clearTimeout(th is.timer);
this.timer = setTimeout(this .getData.bind(t his),
this.waitAfterI nput);
break;
}
},
onfocus: function(e) {
this.changeHigh light();
},
onblur: function(e) {
setTimeout(this .hide.bind(this ), 200); // 200 msec for
onclick event of item
},
onmouseover: function(e) {
this.pos = MS.getTarget(e) .idx;
this.changeHigh light();
},
onclick: function(e) {
this.pos = MS.getTarget(e) .idx;
this.changeHigh light();
this.select();
},
ondblclick: function(e) {
if(this.ele.val ue == "")
this.getData();
},
onchange: function(e) {
if(this.childre n != null)
for(var i=0; i<this.children .length; i++) {
this.children[i].onparentchange (this.ele.value );
}
},
onparentchange: function(v) {
this.ele.value = "";
},
updateList: function() {
var l = this.getLength( );
for(var i=0; i<l && i<this.count; i++) {
// MS.setText(this .div.childNodes[i],
this.getDisplay (this.getItem(i )));
this.div.childN odes[i].innerHTML =
this.getDisplay (this.getItem(i ));
this.div.childN odes[i].style.display = "block";
}
if(this.pos l) this.pos = this.getLength( ) -1;
for(var i=l; i<this.count; i++) {
this.div.childN odes[i].style.display = "none";
}
if(this.pos l -1) {
this.pos = l -1;
}
if(this.div.chi ldNodes[0].clientHeight == 0) {
this.show();
this.updateList ();
return;
}
var h = (l < this.count ? l : this.count) *
this.div.childN odes[0].clientHeight;
if(h 0) {
this.div.style. height = h + "px";
this.show();
} else
this.hide();
},
getData: function() {
},
ondata: function() {
this.updateList ();
},
onresize: function() {
var r = MS.Position.get Bounds(this.ele );
this.ele.rect = r;
r.top += r.height;
MS.Position.set Location(this.d iv, r);
},
initialize: function(id, count, parent) {
this.ele = $(id);
if(this.ele == null || this.ele.tagNam e != "INPUT") throw
"Control could not be found.";
this.count = count != null && !isNaN(count) ? count :
this.count;
if(parent != null) { // no the parent control, instance of
MS.Web.AutoComp lete
parent.children = [];
parent.children .push(this);
}
addEvent(this.e le, "keydown", this.onkeydown. bind(this));
addEvent(this.e le, "keyup", this.onkeyup.bi nd(this));
addEvent(this.e le, "blur", this.onblur.bin d(this));
addEvent(this.e le, "focus", this.onfocus.bi nd(this));
addEvent(this.e le, "change", this.onchange.b ind(this));
addEvent(this.e le, "dblclick", this.ondblclick .bind(this));
// build list
this.div = document.create Element("div");
document.body.a ppendChild(this .div); // see iframe
ajaxpro
this.div.id = this.ele.id + "_list";
this.div.style. display = "none";
this.div.style. border = "1px solid black";
var r = MS.Position.get Bounds(this.ele );
this.ele.rect = r;
r.top += r.height;
MS.Position.set Bounds(this.div , r);
this.div.style. width = (r.width -2) + "px";
for(var i=0; i<this.count; i++) {
var d = document.create Element("div");
this.div.append Child(d);
// d.style.width = (r.width -2) + "px";
d.style.width = this.ele.client Width;
// d.style.height = r.height + "px";
d.style.whiteSp ace = "nowrap";
d.style.overflo w = "hidden";
d.className = this.ele.id + "_item";
d.idx = i;
addEvent(d, "mouseover" , this.onmouseove r.bind(this));
addEvent(d, "click", this.onclick.bi nd(this));
MS.setText(d, " ");
}
addEvent(window , "resize", this.onresize.b ind(this));
delete r;
}
}, false);
MS.Web.AutoComp leteDataTable = Class.create();
Object.extend(M S.Web.AutoCompl eteDataTable.pr ototype,
MS.Web.AutoComp lete.prototype, true);
Object.extend(M S.Web.AutoCompl eteDataTable.pr ototype, {
dt: null,
getItem: function(idx) {
if(idx >= 0 && idx < this.dt.Rows.le ngth)
return this.dt.Rows[idx];
return null;
},
getLength: function() {
if(this.dt != null && this.dt.Rows != null) {
return this.dt.Rows.le ngth;
}
return 0;
},
callback: function(res) {
if(res.error != null) {
// alert(res.error .Message);
return;
}
this.dt = res.value;
this.ondata();
}
}, true);
