使用jquery和mvc剃须刀的delimitir问题

Question

我无法在同一字段中添加少量值。我只能选择一个值，并且在输入,，;或其他分隔字符后，我无法选择另一个值。我希望它能像自动完成一样工作。

我有jQuery的一个文本框的约束：

public ActionResult TagName(string q) 
{ 
    var tags = new List<TagModel> 
    { 
     new TagModel {Name = "aaaa", NumberOfUse = "0"}, 
     new TagModel {Name = "mkoh", NumberOfUse = "1"}, 
     new TagModel {Name = "asdf", NumberOfUse = "2"}, 
     new TagModel {Name = "zxcv", NumberOfUse = "3"}, 
     new TagModel {Name = "qwer", NumberOfUse = "4"}, 
     new TagModel {Name = "tyui", NumberOfUse = "5"}, 
     new TagModel {Name = "asdf[", NumberOfUse = "6"}, 
     new TagModel {Name = "mnbv", NumberOfUse = "7"} 
    }; 

    var tagNames = (from p in tags where p.Name.Contains(q) select p.Name).Distinct().Take(3); 

    string content = string.Join<string>("\n", tagNames); 
    return Content(content); 
} 

我使用这些脚本：

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.autocomplete.js")" type="text/javascript"></script> 
<link href="@Url.Content("~/Scripts/jquery.autocomplete.css")" rel="stylesheet" type="text/css" /> 

没有

<div class="editor-field"> 
    @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) 
</div> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#Name").autocomplete('@Url.Action("TagName", "Tag")', { 
     minChars: 1, 
     delimiter: /(,|;)\s*/, 
     onSelect: function(value, data){ 
      alert('You selected: ' + value + ', ' + data); 
     } 
    }); 
}); 
</script> 

它从我的控制器使用数据错误在萤火虫。我的代码有什么问题？

Answer 1

我会用更近jQuery UI autocomplete插件推荐你。 jQuery UI 1.8甚至作为新的ASP.NET MVC 3项目的一部分分发。

至于你的代码而言尝试修复它是这样的：

var url = '@Url.Action("TagName", "Tag")'; 
$('#Name').autocomplete(url, { 
    minChars: 1, 
    multiple: true, 
    formatResult: function(row) { 
     return row[0].replace(/(<.+?>)/gi, ''); 
    } 
}).result(function (event, data, formatted) { 
    alert(!data ? "No match!" : "Selected: " + formatted); 
}); 

Answer 2

附带jQuery UI的自动完成功能，具有比单独的jQuery插件不同的代码格式。关于这方面的细节可以在jQuery UI网站的下面的链接中找到。

http://jqueryui.com/demos/autocomplete/

这里是jQuery UI的自动完成功能

$("#Name").autocomplete({ 
     source: url, 
     minLength: 1, 
     select: function(event, ui) { 
      log(ui.item ? 
       "Selected: " + ui.item.value + " aka " + ui.item.id : 
       "Nothing selected, input was " + this.value); 
     } 
    }); 

Answer 3

经历过这种与萤火虫问题的一个简单的例子。

我建议，直到它包含错误信息不信任的Firebug控制台

如果你的代码没有按预期工作，和Firebug是不显示任何错误消息，你那么它的时间来检查你的web页面，并查看控制台选项卡中的特殊情况，，特别是当您使用ajax时。

Answer 4

你使用的是什么版本的自动完成，jquery ui不支持这个。详情请参阅http://jqueryui.com/demos/autocomplete/#multiple。

这是从页面的这段组建多选择

.autocomplete({ 
     minLength: 0, 
     source: function(request, response) { 
      // delegate back to autocomplete, but extract the last term 
      response($.ui.autocomplete.filter(
       availableTags, extractLast(request.term))); 
     }, 
     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; 
     } 
    }); 

Answer 5

1. 创建一个div（容器）。

2. 风格它，使它看起来像一个文本区域。

3. 将您的文本字段放在div中。将它浮起来。清除它的边界（因此，在文本字段中的光标，div真的看起来像文本区域。）

4. 将自动完成绑定到该字段。

5. 选择时，创建一个span或div或类似这样的`TheLabel并将其预先放在div（容器）中。

   1.Before前面加上，使用jQuery .data()

   2.It将制作好的用户接口保存在span的对象。

6. 如果您愿意，也可以选择删除以前的选择。