AutoSuggest typeAhead issue

Old Pedant · October 24th, 2008, 09:08 PM

And what the heck...one more demo.

http://www.ClearviewDesign.com/Newbi...etionDemo.html

Now I really am hitting an Access database to get the list of states and then, after you have selected a valid state, the list of cities in that state.

Again, you can see the HTML by just doing a VIEW==>>SOURCE.

And the ASP code is not very long. Here:

***** code for "cityStateCompleter.asp" *****

Code:

<html>
<body>
<div id="FROM">
<%
rtype  = Trim("" & Request("r"))
state  = Replace( Trim("" & Request("s")), "'", "''" )
city   = Replace( Trim("" & Request("c")), "'", "''" )

If state = "" OR ( rtype = "c" AND city = "") Then 
    found = 0
Else
    Set conn = Server.CreateObject("ADODB.Connection") 
    conn.Open = "Provider=Microsoft.Jet.OLEDB.4.0;" _
            & "Data Source=" & Server.MapPath("zipcodes.mdb") & ";"

    If rtype = "c" Then
        SQL = "SELECT city FROM cities,states " _
            & " WHERE cities.state = states.state AND statename = '" & state & "' AND city LIKE '" & city & "%' ORDER BY city"
    Else
        SQL = "SELECT statename FROM states WHERE statename LIKE '" & state & "%' ORDER BY statename"
    End If

    Set RS = conn.Execute(SQL)
    found = 0
    Do Until RS.EOF
        ' make state name prettier
        n = split(LCase(RS(0))," ")
        For w = 0 To UBound(n)
            n(w) = UCase(Left(n(w),1)) & Mid(n(w),2)
        Next
        name = Join( n, "&nbsp;")
%><a ID="AWORD" href="#" onclick="return parent.copyMatch(this);"><%=name%></a><br />
<%
        found = found + 1
        RS.MoveNext
    Loop
    RS.Close
    Conn.Close
End If
%>
</div></body>
<script>
parent.showMatches(document.getElementById("FROM"), <%=found%>);
</script>
</html>

joefawcett · October 25th, 2008, 05:38 AM

Okay, I'll give you it's smaller, I make my original about 150 lines as opposed to your 100, but mine has the cross-browser library as well although the part it uses is only about 15 lines.
But it's also missing a lot of features that the original did, besides the fact that using a hidden frame provides less flexibility than calling a web service, what if you need you need to post values, set headers etc?

You can't arrow down and up the suggestions
It doesn't provide a partially selected completion
It doesn't shows the suggestion in the list using a different style

Other than that it's very nifty.

--

Joe (Microsoft MVP - XML)

Old Pedant · October 25th, 2008, 02:26 PM

Yeah, after I posted, I went back and really looked closely at that other code and noticed the arrow up-down stuff and the partial completion (not sure what the value of that is...seems like it makes the experience more confusing...but clearly takes more code that I don't include).

Ah well...

Not sure why you say I can't post values; it's trivial to simply use <FORM METHOD=POST> and submit the form to the <IFRAME>. Presto. In fact, I almost did it that way.

But my primary reason for using an IFRAME was just to show that Ajax doesn't *HAVE* to be the universal panacea.

Oh well, was really kind of a waste of effort on my part, but I'd never done it before and wanted to see how hard it really was.

At least I did one thing: I handled the objection of the Original Poster, to wit, "If I start typing ma it completes with maine without waiting for the next character."

With my adjustable delay time, you can make it as sensitive or insensitive as you want on this matter. Just type the "p" of "map" within my delay time and it cancels the autocomplete. I'm sure you or I could figure out how to add that to the code he posted, though, so it's not a big deal.

joefawcett · October 26th, 2008, 04:57 AM

You're right about the post part.
In my original (and Nicholas') it was also mentioned that you could use a hidden (i)frame to do the communication. The example used the XMLHttpRequest but a lot of Ajax stuff was shown using other techniques. My original was also supposed to demonstrate OO programming in JavaScript. So that's why there were two "classes", one for the control and one for the provider. This way you could plug in various providers depending on your data source. You could also vary the type ahead timeout and other stuff.
I don't think it was a waste of time.

--

Joe (Microsoft MVP - XML)

rajesh_css · October 29th, 2008, 02:19 AM

Hi,
from the links mentioned for the same example how can we handle the key events,
i mean uparrow,downarrow,enter key as of now it was not handled
how to handle them .

Raj