Question

enter image description here

我想要一个自动复制，看起来像图像中的那个，蓝色背景和x-s用于删除所选项目。

在示例中，我写了'j'，并且在下拉列表中列出了两个名字中带有j的用户。实现这一目标的最佳方法是什么？

Answer 1

这是您正在寻找的jquery插件

click here to learn more..

Answer 2

我建议你使用jQuery UI。您有一个autocomplete widget，您可以根据需要自定义CSS。要选择多个项目，您可以使用tagsinput plugin。

以下是tagsinput的示例代码：

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

Answer 3

您需要使用ajax并且可能是jquery ui自动完成小部件：

由于您使用的是asp.net，因此您可以先在应用程序中创建类似处理程序的内容。

样本处理程序

<%@ 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;
        }
    }
}

在你的html页面中，以此为基础，

<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>

在文本框中自动完成

3 个答案: