jQueryUI स्वत: पूर्ण - कस्टम डेटा और प्रदर्शन

Question

मेरा पूरा कोड यहाँ है: http://jsfiddle.net/HfNk9/13/

मैं इस उदाहरण jqueryUi autocomplete - custom data and display करने के लिए देख रहा हूँ।

की वस्तु परियोजनाओं लगता है चलो अलग है और यह इस तरह दिखता है:

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

अगर मैं सेट source = project स्वत: पूर्ण project.value और नहीं project.name को दर्शाता है।
मुझे इस व्यवहार को कैसे बदलना चाहिए?

---

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

मेरा पूरा कोड: http://jsfiddle.net/HfNk9/13/

Answer 1

आप स्वत: पूर्ण विजेट के अलावा किसी अन्य संपत्ति पर फिल्टर करने के लिए की जरूरत है डिफ़ॉल्ट रूप से चालू खोज (जैसा कि आप देखा है यह है: आप value के बजाय name के मूल्य का उपयोग करना चाहते हैं तो आप कुछ इस तरह करना होगा ऑब्जेक्ट्स के साथ स्रोत सरणी का उपयोग करते समय name या value)।

आप स्रोत के रूप में एक सरणी के बजाय एक समारोह का उपयोग करें और अपने खुद के छानने प्रदर्शन कर सकते हैं कि जिस तरह से:

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

उदाहरण:http://jsfiddle.net/QzJzW/

Answer 2

आप select संपत्ति का उपयोग करना चाहिए:

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

Answer 3

जवाब पेज आप जुड़े हैं करने के लिए स्रोत कोड में है।

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