在asp.net中自动完成选择多个标签

Posted

技术标签:

【中文标题】在asp.net中自动完成选择多个标签【英文标题】:Auto-complete select multiple tags in asp.net 【发布时间】:2016-03-21 06:43:53 【问题描述】:

任何人都可以告诉我如何在自动完成中使用标记化进行多项选择,我向你保证,我只想要来自 web 服务的 asp.net web 我的代码:

$(function () 
    // Web servcice javascript code for City
    $("[id*=ctl00_ContentMain_TextBoxSkills]").autocomplete(
        source: function (request, response) 
            $.ajax(
                url: '<%=ResolveUrl("~/WebServices/WebServiceSkills.asmx/GetAutoCompleteData")%>',
                data: " 'username': '" + request.term + "'",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) 
                    if (data.d.length > 0) 
                        response($.map(data.d, function (item) 
                            return 
                                label: item.split('-')[0],
                                val: item.split('-')[1]
                            ;
                        ))
                     else 
                        response([ label: 'No results found.', val: -1 ]);
                    
                
            );
        ,
        select: function (e, u) 
            if (u.item.val == -1) 
                return false;
            
        
    );
);

我想使用网络服务从数据库中获取数据并显示在前端以供多选

Web Service:
DataTable dt = userRegistrationHelper.GetSkillsList(username);
        DataRow[] rows = null;
        rows = dt.Select(string.Format("SkillName = 0", username));
        string[] result = new string[rows.Length];
        for (int i = 0; i <= rows.Length - 1; i++)
        
            result[i] = rows[i]["SkillName"].ToString();
        
        return result;

【问题讨论】:

【参考方案1】:
Autocomplete with multiple words or values with comma separated 

   $(function () 
     $("[id*=ctl00_ContentMain_TextBoxSkills]").autocomplete(
    source: function(request, response) 
    $.ajax(
    type: "POST",
    contentType: "application/json; charset=utf-8",
     url: '<%=ResolveUrl("~/WebServices/WebServiceSkills.asmx/GetAutoCompleteData")%>',
    data: "'username':'" + extractLast(request.term) + "'",
    dataType: "json",
    success: function(data) 
    response(data.d);
    ,
    error: function(result) 
    alert("Error");
    
    );
    ,
    focus: function() 
    // prevent value inserted on focus
    return false;
    ,
    select: function(event, ui) 
    var terms = split(this.value);
    // remove the current input
    terms.pop();
    // add the selected item
    terms.push(ui.item.value);
    // add placeholder to get the comma-and-space at the end
    terms.push("");
    this.value = terms.join(", ");
    return false;
    
    );
    $("[id*=ctl00_ContentMain_TextBoxSkills]").bind("keydown", function(event) 
    if (event.keyCode === $.ui.keyCode.TAB &&
    $(this).data("autocomplete").menu.active) 
    event.preventDefault();
    
    )
    function split(val) 
    return val.split(/,\s*/);
    
    function extractLast(term) 
    return split(term).pop();
    
    );

【讨论】:

你好@Manish,我正在使用你提供的这段代码,但这段代码正在调用我的网络服务方法,它给了我错误 感谢@Manish 的帮助,现在我解决了这个问题。

以上是关于在asp.net中自动完成选择多个标签的主要内容,如果未能解决你的问题,请参考以下文章

自动完成不适用于 IE 的 asp.net 文本框

如何在 ASP.NET 中制作自动完成文本框?

在 HTML 中自动完成 ERROR 404(使用 ASP.NET 和 JQuery)

如何在带有 ADO.NET 的 ASP.NET Core MVC 中使用 jQuery Ajax 自动完成

使用asp.net从数据库中自动完成JQuery

在 Asp.net Web 表单中向 ajax 自动完成功能添加两个值