[RESOLVED] ListSearchExtender but in a textbox

[sapator]

Hi.
Ok the AJAX ListSearchExtender will manipulate listboxes,dropdownlist etc.
In another discussion here i presented a filter that does this exactly as i want(and better imo).
What i need to know is, if there is some mechanism that you can type in a textbox and bellow you get the data that you want(p.e. typing a will present "aardvark","afoul","ant" ,typing an "f" after the "a" will only show "afoul", you get the point) not in a predefined listbox with data but possibly in some other sort of(ajax?) control.So in sort the data will be shown when you start typing.
A simple example is a forum that you go to the search option and you want to find posts by a user.When you start typing you get a list below with matching user names.So this is doable at least with php sites using JS.So any help.

P.S. This filter is for future usage so i don't need a fast "alternative".And i think it's JS time again ( ).

Edit.Come to think of it.Google does this but in much higher extend.

[gep13]

Hey sap,

Bottom line is, yes, given enough information, you can do whatever your want. However, what it comes down to is responsiveness of your application.

If you are wanting "something" to happen as the user types letter's into a TextBox, you either need to have that information already available on the client, so that the filtering can happen there. Or you need to post back to the server and do the work there. In days of old, that would have been a nightmare, as it would have meant a full page post back, however, now with AJAX (and I am not only talking about Microsoft AJAX), you can do this work in a partial post back manner, so that the page is still responsive and usable.

As you have mentioned, the new Google home page shows a great example of this, where the search results appear as you are typing.

Gary

[brin351]

If a site is not using microsoft AJAX then I tend to use a the standard JS ajax script on the page to make a call to a .ashx handler on the server. There are partial page postback but sometimes they get messy if the page has alot of code. Once the initual list is returned to the client you can do further filtering on the list client side.

[sapator]

Thanks Gary so it's JS matter after all?No standard control?
brin ye i use ashx to bring pictures from sql but there is a need for a control for binding.So if i bring the data back i need a listbox or combo of grid for binding(?).But if you notice what i'm referring to (google,find a user etc), well i don't seem to find an "open below from scratch" control.
As i've said i need this kind of presentation.Well to rephrase, i would be good if i could achieve this kind of presentation.
Else i suggest you mean i should have my ashx data fetch,p.e., if a user press "a",all subjects that start with "a" on a listbox and after if he presses "b", all subject start with "ab" (while checking for duplicates or remove the initial list).
Hey could you point me to a standard Ajax JS script example that calls ashx, on a list or array perhaps?Cuz i only do it with control relationships till now.
But again my original question is for the presentation.So even if i bring the data in an array, i still need to present it in a asp or ajax control
Thanks.

[sapator]

Hmmm.
Maybe autocomplete extender?

[sapator]

Hmm.
Yes autocomplete kinda do what i need.
Although i would like to know the JS thoughts of you guys.Ashx or simple JS or Ajax JS.
The reason is that autocomplete can only use a webservice and it get's worst because i can only add another variable on the autocomplete fetching with ContextKey.

I'll explain for future reference if anyone needs it because i could not find a complete solution so i added the pieces.
So basically i only can do this on the webservice:

(ByVal prefixText As String, ByVal count As Integer, ByVal contextKey As String)

Now it got me 6 hours to fix it and the reason was, understanding the service, creating the calls,finding that if i change any name on the webservice declaration above then the service will not fire with autocomplite ( ) and basically i was scratching my mind on how to pass a manually value on the contextKey by code and i did this with findcontrol.

So the key for working is
1)Create and prepare,add imports etc, on the service
2)use standard variables
3)Put the autocomplete extender on the markup and add the service, binding it to the textbox
4)Use findcontrol on the autocomplete extender and change the contextKey value.

Here is a ready to go web service: (note u wont need <ScriptMethod()> _ for the autocompete but i left it anyway)

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services
Imports System.Data.SqlClient
Imports System.Data


' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
' <System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
<System.Web.Script.Services.ScriptService()> _
Public Class WebService
    Inherits System.Web.Services.WebService

    <WebMethod()> _
    <ScriptMethod()> _
    Public Function GetDrugInfo(ByVal prefixText As String, ByVal count As Integer, ByVal contextKey As String) As String()
       'no need here' count = 10
        Dim cn As New SqlConnection(ConfigurationManager.ConnectionStrings("YourConnectionString").ConnectionString)
       ' a simple manually typed query for testing
        Dim sql As String = "Select * from table1 Where itemname like @prefixText  and itemstypeid=@itemstypeid" 
        Dim da As SqlDataAdapter = New SqlDataAdapter(sql, cn)
        da.SelectCommand.Parameters.Add("@prefixText", SqlDbType.VarChar, 50).Value = (prefixText + "&#37;")
        da.SelectCommand.Parameters.Add("@itemstypeid", SqlDbType.Int).Value = contextKey
        Dim dt As DataTable = New DataTable
        da.Fill(dt)
        Dim items() As String = New String((dt.Rows.Count) - 1) {}
        Dim i As Integer = 0
        For Each dr As DataRow In dt.Rows
            items.SetValue(dr("itemname").ToString, i)
            i = (i + 1)
        Next

        Return items

    End Function

End Class

But the problem is i'm limited to 2 variables (count is internal), prefixText and contextKey.So, well it's ok i guess but if i wanted another variable then bye bye sap.
So...

[brin351]

If you have a asp ajax enabled website (create new website > ajax website) then the "autocomplete extender" will be available to you. I don't know if you can convert existing websites to asp ajax enabled, I have not tried.

The x in ajax stands for xml so theoretically you return your data to the ajax request in xml format and manipulate it on the client with JS to add items to a listbox or make a list of links etc. Sometimes I just create the html markup in the .ashx file and send it back to the page because it easy and doesn't matter in that case.

Here is a auto complete example that a expects xml response. You can modify the JS response handling to do what you need.


aspx/html page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Ajax Auto Complete</title>
    <style type="text/css">
.mouseOut {
background: #708090;
color: #FFFAFA;
}
.mouseOver {
background: #FFFAFA;
color: #000000;
}
</style>

    <script type="text/javascript">
var xmlHttp;
var completeDiv;
var inputField;
var nameTable;
var nameTableBody;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function initVars() {
inputField = document.getElementById("names");
nameTable = document.getElementById("name_table");
completeDiv = document.getElementById("popup");
nameTableBody = document.getElementById("name_table_body");
}
function findNames() {
initVars();
if (inputField.value.length > 0) {
createXMLHttpRequest();
var url = "i-AutoComplete.aspx?names=" + escape(inputField.value);
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
} else {
clearNames();
}
}
function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var name = xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data;
setNames(xmlHttp.responseXML.getElementsByTagName("name"));
} else if (xmlHttp.responseText == 204){
clearNames();
document.getElementById("xx").innerText = "204";
}
}
}
function setNames(the_names) {
clearNames();
var size = the_names.length;
setOffsets();
var row, cell, txtNode;
for (var i = 0; i < size; i++) {
var nextNode = the_names[i].firstChild.data;
row = document.createElement("tr");
cell = document.createElement("td");
cell.onmouseout = function() {this.className='mouseOver';};
cell.onmouseover = function() {this.className='mouseOut';};
cell.setAttribute("bgcolor", "#FFFAFA");
cell.setAttribute("border", "0");
cell.onclick = function() { populateName(this); } ;
txtNode = document.createTextNode(nextNode);
cell.appendChild(txtNode);
row.appendChild(cell);
nameTableBody.appendChild(row);
}
}
function setOffsets() {
var end = inputField.offsetWidth;
var left = calculateOffsetLeft(inputField);
var top = calculateOffsetTop(inputField) + inputField.offsetHeight;
completeDiv.style.border = "black 1px solid";
completeDiv.style.left = left + "px";
completeDiv.style.top = top + "px";
nameTable.style.width = end + "px";
}
function calculateOffsetLeft(field) {
return calculateOffset(field, "offsetLeft");
}
function calculateOffsetTop(field) {
return calculateOffset(field, "offsetTop");
}
function calculateOffset(field, attr) {
var offset = 0;
while(field) {
offset += field[attr];
field = field.offsetParent;
}
return offset;
}
function populateName(cell) {
inputField.value = cell.firstChild.nodeValue;
clearNames();
}
function clearNames() {
var ind = nameTableBody.childNodes.length;
for (var i = ind - 1; i >= 0 ; i--) {
nameTableBody.removeChild(nameTableBody.childNodes[i]);
}
completeDiv.style.border = "none";
}
    </script>

</head>
<body>
    <h1>
        Ajax Auto Complete Example</h1>
    Names:
    <input type="text" size="20" id="names" onkeyup="findNames();" style="height: 20;" />
    <div style="position: absolute;" id="popup">
        <table id="name_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0">
        <tbody id="name_table_body">
        </tbody>
        </table>
    </div>
    <div id="xx">dd</div>
</body>
</html>

server code (ashx or where ever)

Dim prefix As String = Request.QueryString("names")
        Dim res As String = "<response>"
        Dim matches As String = ""

        'using the xml doc dynamicListbox.xml as the datasource
        Dim xDoc As New XmlDocument
        xDoc.Load(Server.MapPath("c-DynamicListbox.xml"))
        'the xml structure of c-DynamicListbox.xml is as follows
        '<root>
        '  <car>
        '    <year>2006</year>
        '    <make>Dodge</make>
        '    <model>Charger</model>
        '  </car>
        '</root>

        Dim nList As XmlNodeList = xDoc.SelectNodes("//car")
        Dim n As XmlNode 

	  For Each n In nList
            'we are getting the modles to match with entered text
            Dim s As String = n.ChildNodes(2).InnerText
            If s.ToLower.StartsWith(prefix.ToLower) Then
                matches += "<name>" & s & "</name>"
            End If
        Next

        res += matches & "</response>"

        If matches <> "" Then
            Response.Clear()
            Response.ClearHeaders()
            Response.ContentType = ("text/xml")
            Response.AddHeader("Cache-Control", "no-cache")
            Response.Write(res)
        Else
            'if there is no match then clear the response to the browser
            Response.StatusCode = 204
            Response.Write("204")
        End If

[sapator]

Wow!
I have a headache from my previous 6 hours effort so i won't even try to look at this today.I will give it a look tomorrow and write this thread down for future usage.
Thanks.

[gep13]

Hey,

Wasn't on much here much over the weekend, and now I am playing catch up...

What have we decided? Are you going down the Microsoft AJAX route? Or are you going to stick with a raw AJAX approach?

Gary

[sapator]

Hey.
Since i don't have any extreme request for multiple data inputs i will use autocomplete that i have tested.
Brin's code, i marked it down for future usage and experiment.Also if i'm not mistaken i have to pass and xml doc so i need more testing on the subject and since i've shown them the filter and they did said it's fine i'll give them that one and experiment with the JS.
Only "problem" with autocomplete is that i don't see any non CSS properties so i need CSS for the design of it but heh.
Ok i'm marking it as resolved.
Thanks guys!

[gep13]

But CSS rocks!!

[sapator]

Well AC/DC rocks CSS is just a boring thing that we must do in life
Anyhow i don't have the proper knowledge of CSS at the moment so i'll try some basic stuff and of course post for help if i scr#w up.

[gep13]

Well AC/DC rocks CSS is just a boring thing that we must do in life
Anyhow i don't have the proper knowledge of CSS at the moment so i'll try some basic stuff and of course post for help if i scr#w up.

Sounds like a plan.

Gary