Member Avatar for riahc3

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
  • 148 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by riahc3
Member Avatar for JorgeM

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>
Member Avatar for riahc3

Thats not exactly what I want but Ill try to adapt it...

Member Avatar for JorgeM

Yes, I understood that. My example was simpy to provide you with an idea.

Member Avatar for bops

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

Member Avatar for riahc3

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

Member Avatar for Troy III

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

Member Avatar for riahc3

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

Will have to stay nonedynamic. :( Too bad.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.