jQueryUI autocomplete - dữ liệu tùy chỉnh và hiển thị

Question

mã đầy đủ của tôi là ở đây: http://jsfiddle.net/HfNk9/13/

tôi tìm cách để ví dụ này jqueryUi autocomplete - custom data and display.

Giả sử các dự án đối tượng là khác nhau và nó trông như thế này:

project = [ 
    { 
     name: 'bar', 
     value: 'foo', 
     imgage: 'img.png' 
    } 
] 

Nếu tôi đặt source = project autocomplete đề cập đến project.value và không project.name.
Tôi nên thay đổi hành vi này như thế nào?

---

var autocomplete = function(element, data) { 
    var fixtures = [ 
     { 
     avatar: "http://www.placekitten.com/20/20", 
     name: 'aaaaaaaaa', 
     value: 'bbbbbbbbb'} 
    ]; 

    element.autocomplete({ 
     minLength: 3, 
     source: function(request, response) { 
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
      response($.grep(fixtures, function(value) { 
       return matcher.test(value.name); 
      })); 
     }, 
     create: function() { 
      console.log(fixtures) 
      element.val(fixtures.name); 
     }, 
     focus: function(event, ui) { 
      element.val(ui.item.name); 
      return false; 
     }, 
     select: function(event, ui) { 
      element.val(ui.item.name); 
      return false; 
     } 
    }).data('autocomplete')._renderItem = function(ul, item) { 
     return $('<li></li>') 
      .data('item.autocomplete', item) 
      .append('<a><img src="' + item.avatar + '" />' + item.name + '<br></a>') 
      .appendTo(ul); 
    }; 
}; 

autocomplete($('#auto')); 

mã đầy đủ của tôi: http://jsfiddle.net/HfNk9/13/

Answer 1

Bạn cần phải lọc trên một tài sản khác với widget autocomplete tìm kiếm trên theo mặc định (như bạn đã nhận thấy nó name hoặc value khi sử dụng một mảng nguồn với các đối tượng).

Bạn có thể sử dụng một chức năng thay vì một mảng như nguồn và thực hiện lọc của riêng bạn mà cách:

element.autocomplete({ 
    minLength: 3, 
    source: function(request, response) { 
     var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
     response($.grep(fixtures, function(value) { 
      return matcher.test(value.name); 
     })); 
    }, 
    create: function() { 
     console.log(fixtures) 
     element.val(fixtures.name); 
    }, 
    focus: function(event, ui) { 
     element.val(ui.item.name); 
     return false; 
    }, 
    select: function(event, ui) { 
     element.val(ui.item.name); 
     return false; 
    } 
}).data('autocomplete')._renderItem = function(ul, item) { 
    return $('<li></li>') 
     .data('item.autocomplete', item) 
     .append('<a><img src="' + item.avatar + '" />' + item.name + '<br></a>') 
     .appendTo(ul); 
}; 

Ví dụ:http://jsfiddle.net/QzJzW/

Answer 2

Bạn nên sử dụng select tài sản:

$("...").autocomplete({ 
    source: ..., 
    select: function(event, ui) { //when an item is selected 
     //use the ui.item object 
     alert(ui.item.name) 
     return false; 
    } 
}); 

Answer 3

Câu trả lời là trong mã nguồn để các trang web mà bạn đã liên kết với. Nếu bạn muốn sử dụng giá trị của name thay vì value sau đó bạn sẽ làm điều gì đó như thế này:

$("#input").autocomplete({ 
    minLength: 0, 
    source: projects, 
    focus: function(event, ui) { 
     $("#input").val(ui.item.value); 
     return false; 
    }, 
    select: function(event, ui) { 
     $("#input").val(ui.item.value); 
     return false; 
    } 
}) 
.data("autocomplete")._renderItem = function(ul, item) { 
    return $("<li></li>") 
     .data("item.autocomplete", item) 
     .append("<a>" + item.name + "</a>") 
     .appendTo(ul); 
};