CODEWITHSUNDEEP
autocompletedrop-down-menuasp.net-2.0
randomThought
randomThought

Reputation: 6393

Text box with drop down suggestions

I currently have a databound dropdown list on my ASP.Net C# 2.0 website that has around 400 items in it. I want to replace it with something similar like the textbox in google search where you enter letter and only the entries starting with those letters pop up

what is a good way of implementing it? Are there controls that already exists that anybody can suggest?

Upvotes: 9

Views: 42469

Answers (6)

jayantS
jayantS

Reputation: 837

One way to do this using HTML5 (for small datasets of course) is datalist:

<input list="users" name="users">
  <datalist id="users">
    <option value="Alice">
    <option value="Bob">
    <option value="Chuck">
    <option value="Chris">
    <option value="Duke">
    <option value="Emily">
  </datalist>

For larger datasets AJAX is a better way to go.

Upvotes: 13

Mayur Narula
Mayur Narula

Reputation: 150

TextBoxValueToDropDownList 

    function AddNames(text) {

        if (document.myForm.insertText.value == "") {
            document.getElementById("insertText").style.border = "1px solid red";
            return false;
        }
        else {
            var option = document.createElement("OPTION");
            option.text = text.value;
            option.value = text.value;
            document.getElementById("dropDownList").options.add(option);
            document.myForm.insertText.value = "";
            document.getElementById("insertText").style.border = "1px solid green";
        }
    }




    <form name="myForm">
        <table>
            <tr>
                <td>
                    <input type="text" name="insertText" id="insertText" /></td>
                <td></td>
                <td>
                    <select name="dropDown" id="dropDownList">
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="Insert" id="button" onclick="AddNames(insertText);" /></td>
            </tr>
        </table>
    </form>

Upvotes: 0

Zo72
Zo72

Reputation: 15325

check complete.ly too

http://complete-ly.appspot.com/

it has no dependencies and weights very little.

Upvotes: 4

Russ Cam
Russ Cam

Reputation: 125528

There's an AutoComplete extender as past of the AJAX Control Toolkit for ASP.NET. There are plenty of different options that you can set for client caching, delay interval. Just point it at a web service or page method and away you go.

Upvotes: 1

Amirshk
Amirshk

Reputation: 8258

If these are known enrties, you can use JQuery, and on the OnUpdate event:

  1. if it's a long list, make Ajax Request to your webserver, retrieve the best option
  2. if it's a short list, you can load all the options to the page, and offer the optional texts without making a server request.

Checkout the JQuery library for implementations on how to display the suggestion.

Upvotes: 1

AdamW
AdamW

Reputation: 1061

Take a look at http://docs.jquery.com/Plugins/Autocomplete

Also here is a tutorial for use with ASP.Net

Upvotes: 10

Related Questions