Jquery UI autocomplete và thẻ plugin (XOXCO) hợp nhất vấn đề

Question

Tôi đã sử dụng tính năng tự động hoàn thành trong một thời gian mà không gặp vấn đề gì cho đến bây giờ. Tôi muốn tạo ra một hệ thống thẻ (chẳng hạn như một trong stackoverflow).

Đối với điều này tôi đang sử dụng hai plugins:

• jquery UI (http://jqueryui.com/demos/autocomplete/)
• Xoxco (http://xoxco.com/dự án/code/tagsinput /)

tôi có nó chạy và làm việc sử dụng mã này:

$('#related_tags').tagsInput({ 
    autocomplete_url : 'live_search.php', 
    autocomplete : { 
      minLength: 3, 
      delay: 150, 
      //DATA AS OPTION?? 
    }, 
    'height':'30px', 
    'width':'auto', 
    'removeWithBackspace' : true, 
    'minChars' : 3, 
    'maxChars' : 200, 
    'placeholderColor' : '#666666' 
}); 

Tuy nhiên, tôi cần phải thay đổi cách tìm kiếm cuộc sống hiển thị dữ liệu được tìm thấy (để nó không chỉ hiển thị nhãn). Nếu bạn không sử dụng hai plugin này lại với nhau (nói rằng bạn chỉ cần sử dụng autocomplete) thật dễ dàng, bạn chỉ cần làm một cái gì đó như thế này:

$("#related_tags").autocomplete({ 
     source: 'live_search.php', 
     minLength: 3, 
     delay: 150 
}) 
.data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a href='item.php'>" + item.label + " " + item.surname + "<span style='color:#003399;'>" + item.p_name + "</span></a>") 
      .appendTo(ul); 
}; 

Như bạn thấy, tôi không hiển thị chỉ nhãn của mục, tôi cũng hiển thị họ và p_name.

Vì vậy, câu hỏi của tôi là:

---

Làm thế nào để bạn sử dụng chức năng render dữ liệu khi mergin autocomplete và các thẻ bổ sung với nhau?

---

Vì tôi tin rằng dữ liệu không có sẵn dưới dạng tùy chọn tự động hoàn thành, tôi không thể chỉ đẩy nó lên. Bất kỳ ý tưởng?

P.S: Nếu bạn biết cách thực hiện việc này bằng cách sử dụng plugin khác với xoxco, vui lòng cho tôi biết. Cảm ơn!

Answer 1

Plugin hoạt động với loại đầu vào bị ẩn mà plugin đính kèm tự động hoàn thành jquery.

Vì vậy, bạn chỉ cần ghi đè _renderItem vào trường nhập liệu đầu vào đó, giống như bạn sẽ làm cho đầu vào tự động hoàn tất đơn giản.

DEMO

---

Vì vậy, nếu bạn áp dụng các plugin tagsInput đầu vào sau đây (từ ví dụ trên Plugin của trang web):

<input name="tags" id="tags" value="foo,bar,baz" />​ 

$('#tags').tagsInput({ 
    autocomplete_url: 'some url' 
}); 

Bạn end-up với những sản phẩm sau được tạo ra đánh dấu:

<input name="tags" id="tags" value="foo,bar,baz" style="display: none; "> 
<div id="tags_tagsinput" class="tagsinput" style="width: 300px; height: 100px; "> 
    <span class="tag"><span>foo&nbsp;&nbsp;</span><a href="#" title="Removing tag">x</a></span><span class="tag"><span>bar&nbsp;&nbsp;</span><a href="#" title="Removing tag">x</a></span><span class="tag"><span>baz&nbsp;&nbsp;</span><a href="#" title="Removing tag">x</a></span><div id="tags_addTag"> 

    <input id="tags_tag" value="" data-default="add a tag" style="color: rgb(102, 102, 102); width: 80px; " class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"></div> 

    <div class="tags_clear"></div> 
</div> 

Xem trường nhập tags_tag. Đây là thành phần mà plugin Tự động điền được đính kèm. Sau đó, bạn có thể chỉ cần ghi đè số _renderItem:

$('#tags_tag') 
    .data('autocomplete') 
    ._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a href='item.php'>" + item.someProperty + "</a>") 
      .appendTo(ul); 
};​