使用jquery和mvc剃鬚刀的delimitir問題

我無法在同一字段中添加少量值。我只能選擇一個值，並且在輸入,，;或其他分隔字符後，我無法選擇另一個值。我希望它能像自動完成一樣工作。使用jquery和mvc剃鬚刀的delimitir問題

我有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>

它從我的控制器使用數據錯誤在螢火蟲。我的代碼有什麼問題？

screenshot

來源

2011-06-19 user278618

jqueryui autocomplete有一個[示例]（http://jqueryui.com/demosplete/#multiple-remote）正是what're尋找。可能是一個比一年內沒有更新並且用戶基數較小的插件更好的選擇。 –

你有權利。但是，如果你給我的代碼，而不是來源：函數（請求，響應）{ \t \t \t \t \t $ .getJSON（「search.php中」，{ \t \t \t \t \t \t項：extractLast（request.term） \t \t \t \t \t}，response）; \t \t \t \t}從我的帖子粘貼解決方案來獲取數據，這將是我的鞭策。並創建一個答案。我必須給你點:) – user278618

我使用自動完成，並沒有問題，你不能只是使用一個分隔符，爲什麼你有這麼多？ –

我會用更近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); 
});

來源

2011-06-19 09:43:20

我已經刪除舊插件並將腳本更改爲您的。不幸，我得到了同樣的結果：/ – user278618

附帶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); 
     } 
    });

來源

2011-06-22 16:59:11 Zulucap

經歷過這種與螢火蟲問題的一個簡單的例子。

我建議，直到它包含錯誤信息不信任的Firebug控制檯

如果你的代碼沒有按預期工作，和Firebug是不顯示任何錯誤消息，你那麼它的時間來檢查你的web頁面，並查看控制檯選項卡中的特殊情況，，特別是當您使用ajax時。

來源

2011-06-23 22:49:30 Beygi

你使用的是什麼版本的自動完成，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; 
     } 
    });

來源

2011-06-28 03:30:28

創建一個div（容器）。
風格它，使它看起來像一個文本區域。
將您的文本字段放在div中。將它浮起來。清除它的邊界（因此，在文本字段中的光標，div真的看起來像文本區域。）
將自動完成綁定到該字段。
選擇時，創建一個span或div或類似這樣的`TheLabel並將其預先放在div（容器）中。

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

2.It將製作好的用戶接口保存在span的對象。
如果您願意，也可以選擇刪除以前的選擇。

來源

2011-06-28 06:57:17

使用jquery和mvc剃鬚刀的delimitir問題

回答

相關問題