CODEWITHSUNDEEP
javascriptjquery
petko_stankoski
petko_stankoski

Reputation: 10713

Autocompletition in textbox

enter image description here

I want to have an autocompletition which would look like the one in the image, with blue background and x-s for deletion of the chosen items.

In the example, I wrote 'j' and two users with j in their names are listed in the dropdown. What is the best way to accomplish this?

Upvotes: 0

Views: 199

Answers (3)

Sergiu
Sergiu

Reputation: 1396

I recommend you to use jQuery UI. You have an autocomplete widget and you can customize the CSS as you wish. For selecting multiple items you can use tagsinput plugin.

Here is a sample code for tagsinput: 

$('#emails').tagsInput({ 
    width: 'auto', defaultText: 'Add email', isEmail: true 
});

Upvotes: 1

Akhil Sekharan
Akhil Sekharan

Reputation: 12683

You need to use ajax and may be jquery ui autocomplete widget for this:

Since you are using asp.net, you can first create something like a handler in your application.

Sample Handler

<%@ WebHandler Language="C#" Class="SimpleHandler" %>

using System;
using System.Web;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Net;
using System.Text;
using System.IO;                      

public class SimpleHandler : IHttpHandler {   
    UCA.Common.DataControl.DBUtility dbu = new UCA.Common.DataControl.MsSqlDbUtility();
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";

        if (context.Request.QueryString["query"] != null)
        {
            context.Response.Write("You asked for "+ context.Request.QueryString["query"]);
            return;
        }

    public bool IsReusable {
        get {
            return false;
        }
    }
}

The in your html page, use this as a base,

<html>
    <body>
        <form>
            <input type="text" id="txtSearch"/>
            <input type="button" id="btnSubmit" onclick="getDetails(document.getElementById("txtSearch").value)" value="Submit"/>
        </form>
        <br>
        <div id="txtResult"><b>Person info will be listed here.</b></div>
        <script type="text/javascript">
            function getDetails(keyword)
            {
                var xmlhttp=new XMLHttpRequest();
                xmlhttp.onreadystatechange=function()
                {
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    document.getElementById("txtResult").innerHTML=xmlhttp.responseText;
                }
                xmlhttp.open("GET","simplehandler.ashx?query="+keyword,true);
                xmlhttp.send();
            }
        </script>
    </body>
</html>

Upvotes: 0

Murali N
Murali N

Reputation: 3498

Here is the jquery plugin that you are looking for

click here to learn more..

Upvotes: 1

Related Questions