Take Address Dropdown and Make it a Text Input

[<M/>]

Hi

Sorry about the title... i kind of messed it up. I have a drop down menu and it contains many cities (California Cities) and I am trying to turn it into an address search... Sorry if my question forms another question...

but here is an example of what I am trying to do:
Click Here

See how they do their city search? That's what I am trying to achieve...

Do you guys have any resources, snippets, advice, etc. to help me?

Thanks :)

(if my code is needed, which it shouldn't be because its just city names, i will provide)

[<M/>]

Please tell me if this question is still unclear!

[jstfsklh211]

your looking to create a fancy combobox?

i make no promises to how good or not it is but its a start

http://www.daniweb.com/web-development/javascript-dhtml-ajax/code/440963/combobox

[JorgeM]

@Michael-From the link you provided, I think you can probably incorporate the Autocomplete jQuery plug-in. See: http://jqueryui.com/autocomplete/

Also, I put together an example of a simple autocomplete example that uses the keyup method. It sends the keystrokes to a server-side script that returns the results that match. Feel free to take a look: http://www.itgeared.com/articles/1390-jquery-ajax-methods-tutorial/

[<M/>]

JorgeM, is there a way to do this without jquery by any chance?

[JorgeM]

It's got to be client side so then the alternative is to do this with pure JavaScript and plain Ajax. Don't know of other libraries you can use.

[<M/>]

so using this snippet from your site:

$("input").keyup(function () {
    var txt = $("input").val();
    $.post("jquery_ajax_gethint.aspx", { strinput: txt }, function (data) {
        $("span").html(data);
    });
});

How do i plug in the city names and how is it called?

I have my city names set up like this:

<select id="citylist" name="city[]" value="Search" >
        <option value="1">Select a City</option>
        <option value="183">Acton</option>
        <option value="270">Adelanto</option>
        <option value="348">Agoura Hills</option>
        <option value="353">Agua Dulce</option>
        <option value="360">Aguanga</option>
        <option value="372">Ahwahnee</option>
        <option value="622">Alhambra</option>
        <option value="638">Aliso Viejo</option>
        <option value="699">Allensworth</option>
        <option value="791">Alpaugh</option>
        <option value="809">Alpine</option>
        <option value="888">Alta Loma</option>
        <option value="893">Altadena</option>
        <option value="974">Alturas</option>
</select>

Would it be set up like this:

$("citylist").keyup(function () {
    var txt = $("input").val();
    $.post("jquery_ajax_gethint.aspx", { strinput: txt }, function (data) {
        $("span").html(data);
    });
});

  <select id="citylist" name="city[]" value="Search" >
        <option value="1">Select a City</option>
        <option value="183">Acton</option>
        <option value="270">Adelanto</option>
        <option value="348">Agoura Hills</option>
        <option value="353">Agua Dulce</option>
        <option value="360">Aguanga</option>
        <option value="372">Ahwahnee</option>
        <option value="622">Alhambra</option>
        <option value="638">Aliso Viejo</option>
        <option value="699">Allensworth</option>
        <option value="791">Alpaugh</option>
        <option value="809">Alpine</option>
        <option value="888">Alta Loma</option>
        <option value="893">Altadena</option>
        <option value="974">Alturas</option>
</select>

[JorgeM]

Not quite. The way that the code snippet works is that it the keyup event is triggered every time the user hits a key on the keyboard when entering data in an input element of type "text". The value is captured and sent back to a page where sever side scripting takes the current value and perfoms a match against a list of values. The results are sent back to the page that performed the Ajax request. The results are displayed to the user.

I'll need to take a look at the example and provide you with the server side logic.

[<M/>]

I may need to see a snippet that would do that, I am kind of un sure of how to do this.

[JorgeM]

So, the server-side scripting I used in that demo is asp.net/vb. however, I'm sure that you can alter this code the scripting language of your choice. The script basically runs during the page load and assings the value that was passed in the POST to a variable. Then you take that value and try to find one or more matches in the array "myArray". The array could be filled by information stored in a datasource instead.

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        Response.Expires = -1
        Dim q As String = UCase(Request.Form("strinput"))
        Dim myArray(50) As String
        Dim hint As String = ""
        Dim i As Integer
        myArray(1) = "Alabama"
        myArray(2) = "Alaska"

        ' myArray(3) - myArray(49) goes here....

        myArray(50) = "Wyoming"
        If Len(q) > 0 Then
            For i = 1 To 50
                If q = UCase(Mid(myArray(i), 1, Len(q))) Then
                    If hint = "" Then
                        hint = myArray(i)
                    Else
                        hint = hint & "<br/>" & myArray(i)
                    End If
                End If
            Next
        End If
        If hint = "" Then
            Response.Write("No Match!")
        Else
            Response.Write(hint)
        End If

    End Sub