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

Posted 2023-03-05

【中文标题】在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 的帮助，现在我解决了这个问题。