jQuery यूआई स्वत: पूर्ण कस्टम वस्तु सरणी

Question

मैं jQueryUI स्वत: पूर्ण उपयोग कर रहा हूँ और कैसे मेरे डेटा स्रोत के रूप में एक कस्टम वस्तु का उपयोग करने (यानी मैं वापस निम्न प्रकार की एक सूची पास करना चाहते हैं) सोच रहा हूँ:

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

केवल एक चीज:

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

स्वत: पूर्ण कोड है कि मैं वर्तमान में उपयोग कर रहा हूँ (और कहा कि ठीक काम करता है जब मैं वापस नाम के एक सीधे आगे स्ट्रिंग सरणी पारित) काफी jQuery यूआई साइट बंद एक प्रति है मैंने मूल डेमो स्रोत से बदल दिया है यूआरएल है और मैं विभाजन कर रहा हूं अल्पविराम के बजाय एक जगह (एकाधिक स्वत: पूर्ण के लिए)।

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

आदर्श रूप में, मैं इसी गिनती के साथ साथ नामों की सूची के साथ उपयोगकर्ता पेश करने के लिए, चाहते हैं:

यहाँ एचटीएमएल है।

Answer 1

कैसे मेरे डेटा स्रोत

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

डेटा सर्वर से वापस आ रहा फ़ॉर्मेट करने के लिए, सम्मेलन $.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 
      }; 
     }); 
    }); 
}, 

(untested)

यह आपके लिए पॉप्युलेट परिणाम प्राप्त करना चाहिए। यह आपके प्रश्न के दूसरे भाग के साथ हाथ में चला जाता है:

आदर्श रूप से, मैं उपयोगकर्ता को नामों की एक सूची के साथ प्रस्तुत करना चाहता हूं, साथ ही साथ संबंधित गणना भी।

यह सुंदर आसानी से पूरा किया है, एक गाइड के रूप this demo निम्नलिखित:

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

आप जो कुछ भी आप चाहते हैं, जब तक कि यह एक li कि a टैग है और डेटा है है प्रदर्शित करने के लिए _renderItem समारोह ओवरराइड कर सकते हैं item.autocomplete।

उन दो रणनीतियों को संयोजित करें और आपको व्यवसाय में होना चाहिए। इस की एक काम उदाहरण के लिए, एक उदाहरण की जाँच यहाँ: http://jsfiddle.net/andrewwhitaker/UvegL/

यह उदाहरण एक दूरदराज के डेटा स्रोत और कस्टम डेटा & प्रदर्शन को जोड़ती है। उम्मीद है कि इससे मदद मिलेगी, भले ही AJAX कॉल थोड़ा अलग हो।