Vấn đề với delimitir khi sử dụng jquery và dao cạo mvc

Question

Tôi không thể thêm vài giá trị vào cùng một trường. Tôi chỉ có thể chọn một giá trị và sau khi nhập ,, ; hoặc ký tự phân cách khác, tôi không thể chọn một giá trị khác. Tôi muốn nó hoạt động tương tự như tự động hoàn thành.

Tôi có một textbox với jQuery ràng buộc:

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

Nó sử dụng dữ liệu từ bộ điều khiển của tôi:

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

Tôi đang sử dụng các kịch bản:

<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" /> 

Không có lỗi trong firebug. Có gì sai với mã của tôi?

Answer 1

tôi sẽ khuyên bạn sử dụng jQuery UI autocomplete Plugin gần đây. JQuery ui 1.8 thậm chí được phân phối như là một phần của các dự án ASP.NET MVC 3 mới.

Theo như mã của bạn là có liên quan cố gắng sửa chữa nó như thế này:

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

Chức năng tự động hoàn được bao gồm với jQuery UI có một định dạng đoạn mã khác nhau hơn so với độc lập jQuery plugin. Thông tin chi tiết về điều này có thể được tìm thấy tại trang web giao diện người dùng jQuery tại liên kết bên dưới.

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

Dưới đây là một ví dụ đơn giản của jQuery UI Autocomplete chức năng

$("#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

Có kinh nghiệm như thế này của các vấn đề với con đom đóm.

Tôi đề nghị để không tin tưởng Firebug console cho đến khi nó chứa các thông báo lỗi

Nếu mã của bạn không hoạt động như mong đợi, và con đom đóm không hiển thị cho bạn bất kỳ thông báo lỗi sau đó nó là thời gian để kiểm tra trang web của bạn trang trong chrome và xem chính xác ngoại lệ không được xử lý trong tab Bảng điều khiển, đặc biệt khi bạn đang sử dụng ajax.

Answer 4

gì phiên bản của autocomplete bạn đang sử dụng, là jquery ui không hỗ trợ này. Xem http://jqueryui.com/demos/autocomplete/#multiple để biết chi tiết.

Đây là một snippit từ trang để thiết lập các lựa chọn đa

.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. Tạo một div (container).

2. Phong cách nó, để nó trông giống như một vùng văn bản.

3. Đặt trường văn bản của bạn bên trong div. Float nó sang trái. Xóa đường viền (Vì vậy, với con trỏ trong trường văn bản, div sẽ thực sự trông giống như vùng văn bản.)

4. Gắn kết tự động hoàn thành vào trường đó.

5. Khi được chọn, hãy tạo span hoặc div hoặc một cái gì đó như thế này `TheLabel và thêm vào bên trong div (vùng chứa).

   1.Before prepending nó, lưu các đối tượng trong span sử dụng jquery .data()

   2.It sẽ làm cho một diện người dùng tốt.

6. Nếu bạn muốn, bạn cũng có thể cung cấp tùy chọn xóa lựa chọn trước đó.