0

Hello

I want to make a dynamic searchable scrollbox using a textbox.....

Lets say I have the following options.....

Ant
Alroy
Antlers
Antldo
Zoo

When I click and open the scrollbox, it should show all options.

In the textbox, if I type A it should show

Ant
Alroy
Antlers
Antldo

If I type Ant it should show

Ant
Antlers
Antldo

Antl would show

Antlers
Antldo

And if I type Antld only show

Antldo

BUT (here is a small catch) if I type Antldoz, since nothing is like that that, it should once again show me:

Ant
Alroy
Antlers
Antldo
Zoo

What is the best method on doing this?

4
Contributors
7
Replies
20
Views
4 Years
Discussion Span
Last Post by riahc3
0

I was asked to do this once on a project I worked on a while back. The solution that I implemented included jQuery to preform an AJAX query.

A basic demo of the front end is located on this page, towards the bottom...
http://www.itgeared.com/articles/1390-jquery-ajax-methods-tutorial/

The example I have online, is similar to your example, but the search results include the names of states.

Basically on the search page, I used the keyup() method.

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

My example was done using ASP.NET (VB), but I'm sure you can adapt to any server-side scripting language.

..

gethint.aspx

..

<%@ Page Language="vb" Strict="True" %>

<!DOCTYPE html>
<script runat="server">
    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        Response.Expires = -1
        Dim q As String = UCase(Request.Form("q"))
        Dim a(50) As String
        Dim hint As String = ""
        Dim i As Integer
        a(1) = "Alabama"
        a(2) = "Alaska"
        a(3) = "Arizona"

        .... 4 - 49 .....

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

    End Sub
</script>
<html>
<head runat="server">
    <title></title>
</head>
<body>
</body>
</html>
0

jQuery UI has an autocomplete widget which might be what you're looking for:

http://jqueryui.com/autocomplete/

The data source it uses can be hard coded in Javascript or returned from some server side script via AJAX

Looks OK.......The only thing that I would need changing is that if it finds nothing (like I type PHL in that example) it should show me all the list

0

if a ('match') fails, use the same command you are using to show the complete list on an else{ 'declaration' }.

0

Sadly I cant get it to work with a combobox and using a JSON datasource :(

Will have to stay nonedynamic. :( Too bad.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.