0

在此处输入图像描述

我想要一个看起来像图像中的自动完成，蓝色背景和 xs 用于删除所选项目。

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

4

3 回答 3

1

这是您正在寻找的 jquery 插件

点击这里了解更多..

于 2012-11-27T09:58:00.783 回答
1

我推荐你使用 jQuery UI。您有一个自动完成小部件，您可以根据需要自定义 CSS。要选择多个项目，您可以使用tagsinput plugin。

以下是标签输入的示例代码：

$('#emails').tagsInput({ 
    width: 'auto', defaultText: 'Add email', isEmail: true 
});
于 2012-11-27T10:00:24.153 回答
0

您需要使用 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>
于 2012-11-27T10:07:41.393 回答