Đối tượng tùy chỉnh tự động hoàn thành giao diện người dùng jQuery dưới dạng nguồn thay vì chuỗi chuỗi

Question

Tôi đang sử dụng JQueryUI Tự động điền và tự hỏi cách sử dụng đối tượng tùy chỉnh làm nguồn dữ liệu của mình (ví dụ: tôi muốn trả lại danh sách loại sau):

public class Tag 
{ 
    public string Name { get; set; } 
    public int Count { get; set; } 
} 

mã autocomplete mà tôi hiện đang sử dụng (và đó hoạt động tốt khi tôi vượt qua trở lại một mảng chuỗi thẳng về phía trước tên) là khá nhiều bản sao ra khỏi trang web jQuery UI:

$(function() { 
     function split(val) { 
      return val.split(/ \s*/); 
     } 
     function extractLast(term) { 
      return split(term).pop(); 
     } 

     $("#tags") 
     // don't navigate away from the field on tab when selecting an item 
     .bind("keydown", function (event) { 
      if (event.keyCode === $.ui.keyCode.TAB && 
        $(this).data("autocomplete").menu.active) { 
       event.preventDefault(); 
      } 
     }) 
     .autocomplete({ 
      source: function (request, response) { 
       $.getJSON("Home/GetTag", { 
        term: extractLast(request.term) 
       }, response); 
      }, 
      search: function() { 
       // custom minLength 
       var term = extractLast(this.value); 
       if (term.length < 1) { 
        return false; 
       } 
      }, 
      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; 
      } 
     }); 
    }); 

điều duy nhất Tôi đã thay đổi từ nguồn bản demo gốc là Url và tôi đang chia nhỏ một dấu cách chứ không phải dấu phẩy (để tự động hoàn thành nhiều lần).

Đây là HTML:

<div class="ui-widget"> 
    <label for="tags">Tags: </label> 
    <input id="tags"/> 
</div> 

Lý tưởng nhất, tôi muốn giới thiệu cho người dùng một danh sách tên, với số lượng tương ứng bên cạnh.

Answer 1

làm thế nào để sử dụng một đối tượng tùy chỉnh như là nguồn dữ liệu của tôi

Bạn cần phải định dạng dữ liệu của bạn trong một cách mà widget mong đợi. Bạn phải có thuộc tính label hoặc thuộc tính value (hoặc cả hai) trong mỗi đối tượng trong mảng kết quả để tiện ích con hiển thị kết quả của bạn. Bạn có thể bao gồm các dữ liệu khác trong đối tượng, miễn là nó đáp ứng các yêu cầu đó.

Để định dạng dữ liệu trở lại từ máy chủ, quy ước là sử dụng $.map:

source: function (request, response) { 
    $.getJSON("Home/GetTag", { 
     term: extractLast(request.term) 
    }, function (data) { 
     response($.map(data, function (item) { 
      return { 
       value: item.Name, 
       count : item.Count 
      }; 
     }); 
    }); 
}, 

(chưa được kiểm tra)

này sẽ nhận được kết quả Populating cho bạn. Điều này tương tác với phần thứ hai của câu hỏi của bạn:

Lý tưởng nhất, tôi muốn trình bày cho người dùng một danh sách tên, với số lượt tương ứng cùng với.

này khá dễ dàng thực hiện, sau this demo như một hướng dẫn:

$("#auto").autocomplete({ ... }) 
    .data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li>") 
      .data("item.autocomplete", item) 
      .append("<a>" + item.label + "<br />" + item.count + "</a>") 
      .appendTo(ul); 
    }; 

Bạn có thể ghi đè lên _renderItem chức năng để hiển thị bất cứ điều gì bạn muốn, miễn là nó là một li chứa a thẻ và có dữ liệu item.autocomplete.

Kết hợp hai chiến lược đó và bạn nên kinh doanh. Để biết ví dụ về hoạt động này, hãy xem ví dụ tại đây: http://jsfiddle.net/andrewwhitaker/UvegL/

Ví dụ này kết hợp nguồn dữ liệu từ xa và dữ liệu tùy chỉnh & hiển thị. Hy vọng rằng nó sẽ giúp đỡ, mặc dù các cuộc gọi AJAX là một chút khác nhau.