0

ここに画像の説明を入力

選択したアイテムを削除するための青色の背景と xs を使用して、画像のようなオートコンプリートが必要です。

この例では、「j」と書き、名前に j が含まれる 2 人のユーザーがドロップダウンにリストされます。これを達成するための最良の方法は何ですか？

4

3 に答える 3

1

これがあなたが探しているjqueryプラグインです

ここをクリックして詳細をご覧ください..

于 2012-11-27T09:58:00.783 に答える
1

jQuery UI を使用することをお勧めします。オートコンプリート ウィジェットがあり、必要に応じて CSS をカスタマイズできます。複数のアイテムを選択するには、tagsinput pluginを使用できます。

tagsinput のサンプル コードは次のとおりです。

$('#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 に答える