Gợi ý dữ liệu với Jquery.mentionsInput

jquery.mentionsInput là gì ?

Đây là một plugin UI dựa trên Jquery. Tác dụng của nó chính là gợi ý dữ liệu cho bạn khi bạn nhập một từ hay cụm từ nào đó vào một input nào đó. Nó hoạt động giống gợi ý của Facebook hoặc Twitter mỗi khi bạn nhấn ký tự @. Plugin này mới được tạp chí Smashing Magazine giới thiệu gần đây.

Jquery.mentionsInput

Plugin này được viết bởi Kenneth Auchenberg thuộc Podio Lab. Trước đây nó là một dự án đóng nhưng tới thời điểm này nó được open-source để cộng đồng cùng phát triển. Các bạn có thể truy cập vào repo của jquery.mentionsInput tại đây. Plugin dùng event input của HTML5 mỗi khi ta gõ text

Cách sử dụng khá đơn giản:

Trước tiên khai báo sử dụng Jquery.mentionsInput:

<script src='jquery.mentionsInput.js' type='text/javascript'></script>

Tìm đến bất cứ input nào thêm class tên mention vào.

<textarea class='mention'>

Khởi tại event với data có sẵn

$('textarea.mention').mentionsInput({
  onDataRequest:function (mode, query, callback) {
    var data = [
      { id:1, name:'Kenneth Auchenberg', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
      { id:2, name:'Jon Froda', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
      { id:3, name:'Anders Pollas', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
      { id:4, name:'Kasper Hulthin', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
      { id:5, name:'Andreas Haugstrup', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
      { id:6, name:'Pete Lacey', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' }
    ];

    data = _.filter(data, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });

    callback.call(this, data);
  }
});

Khởi tại event với data lấy từ CSDL

  $('textarea.mention-example2').mentionsInput({
    onDataRequest:function (mode, query, callback) {
      $.getJSON('assets/data.json', function(responseData) {
        responseData = _.filter(responseData, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });
        callback.call(this, responseData);
      });
    }

  });

Dữ liệu data phải có dạng JSON và cấu trúc như sau:

{
  'id'    : 1,
  'name'  : 'Kenneth Auchenberg',
  'avatar': 'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif',
  'icon'  : 'icon-16 icon-person',
  'type'  : 'contact'
}

Trong đó:

id: số nguyên định danh bất kỳ
name: chính là tên gợi ý ra để chọn
avatar: hình ảnh trước tên
icon: tên class để style cho avatar
type: chính là dạng dữ liệu sẽ dùng để hiển thị gợi ý

Dạng dữ liệu của text gợi ý nếu bạn muốn lấy:

@[name](type:id)

Ví dụ:

@[Kenneth Auchenberg](contact:1)

Một số thuộc tính có thể khai báo thêm khi khởi tạo:

triggerChar: @ – dùng để chỉ định khi gõ ký tự nào sẽ hiển thị mention
minChars: integer – chỉ định bao nhiêu ký tự sau khi gõ triggerChar thì mention sẽ hiển thị ra
showAvatars: true|false – hiển thị avatar hay không

Một số phương thức có thể dùng để lấy dữ liệu đã nhập:

init(): dùng để khởi tạo mention trên một input nào đó
reset(): xóa bỏ tất cả các text mention đã chèn ở một input nào đó
val(callback): trả về giá trị gồm cả text lẫn mention ở một input nào đó
getMentions(callback): chỉ trả về cấu trúc dữ liệu của mention ở một input nào đó đã chèn

Cách sử dụng các phương thức:

$('textarea.mention').mentionsInput('val', function(text) {
      alert(text);
});

Trong đó

textarea.mention: tên element nào đó
val: chính là tên phương thức (bạn có thể dùng 1 trong 4 phương thức bên trên)

Lưu ý: là chỉ 2 phương thức có callback mới dùng function để xử lý data nhé.

Tương thích: Jquery.mentionsInput có thể chạy trên Firefox 6+, Chrome 15+, và Internet Explorer 8+ và yêu cầu jQuery (1.6+) trở lên.

Trong ví dụ trên có dùng thêm underscore.js để sử dụng function _.filter

Ngoài ra có thể dùng thêm plugin jquery.elastic.js để làm cho mục gợi ý co giãn để phù hợp với chiều rộng của input

Did you like this? Share it:

Tham khảo:

  • http://bcdonline.net/ bancamden

    Tus hay mà khó dùng quá! :( mình không bít jQuery!

    • http://thegioimanguon.com xman

      e thấy blog của bác pro quá í chứ, jquery mà kô biết thì đúng là thiệt thòi quá đó bác :D