बूटस्ट्रैप टाइपहेड AJAX परिणाम प्रारूप - उदाहरण

Question

मैं एक एजेक्स फ़ंक्शन के साथ बूटस्ट्रैप टाइपहेड का उपयोग कर रहा हूं, और जानना चाहता हूं कि सही जेसन परिणाम प्रारूप क्या है, एक आईडी और एक descripcion वापस करने के लिए। मुझे एक एमवीसी 3 मॉडल के साथ टाइपहेड चयनित तत्व को बांधने के लिए आईडी की आवश्यकता है।

[Html] 

    <input id="myTypeahead" class='ajax-typeahead' type="text" data-link="myUrl" data-provide="typeahead" /> 


    [Javascript] 

    $('#myTypeahead').typeahead({ 
     source: function (query, process) { 
      return $.ajax({ 
       url: $('#myTypeahead').data('link'), 
       type: 'post', 
       data: { query: query }, 
       dataType: 'json', 
       success: function (jsonResult) { 
        return typeof jsonResult == 'undefined' ? false : process(jsonResult); 
       } 
      }); 
     } 
    }); 



This works properly when I return a simple list of strings, for example: 
{item1, item2, item3} 

But I want to return a list with Id, for example: 
{ 
{Id: 1, value: item1}, 
{Id: 2, value: item2}, 
{Id: 3, value: item3} 
} 

कैसे ajax में इस परिणाम पर कार्रवाई करने के "सफलता: समारोह()"

इस कोड है?

jquery स्वत: पूर्ण के साथ यह बहुत आसान है, क्योंकि मैं एक जेसन ऑब्जेक्ट सूची लौटा सकता हूं।

[jquery Autocomplete process data example] 
...    
success: function (data) { 
       response($.map(data, function (item) { 
        return { label: item.Id, value: item.Value, id: item.Id, data: item }; 
       }) 
... 

लेकिन यह बूस्ट्रप टाइपहेड के साथ काम नहीं करता है।

क्या कोई मेरी मदद कर सकता है?

धन्यवाद।

Answer 1

मैं दो दिनों की कोशिश करता हूं और अंत में मैं इसे काम कर सकता हूं। बूटस्ट्रैप टाइपहेड डिफ़ॉल्ट रूप से परिणामस्वरूप ऑब्जेक्ट्स की सरणी का समर्थन नहीं करता है, केवल स्ट्रिंग का एक सरणी है। चूंकि "matcher", "सॉर्टर", "अद्यतनकर्ता" और "हाइलाइटर" फ़ंक्शन पैरामीटर के रूप में स्ट्रिंग की अपेक्षा करते हैं।

इसके बजाय, "बूटस्ट्रैप" अनुकूलन योग्य "matcher", "सॉर्टर", "अद्यतनकर्ता" और "हाइलाइटर" फ़ंक्शंस का समर्थन करता है। तो हम Typeahead विकल्पों में उन कार्यों को फिर से लिख सकते हैं।

II ने जेसन प्रारूप का उपयोग किया, और आईडी को एक छिपे हुए HTML इनपुट में बाध्य किया।

कोड:

$('#myTypeahead').typeahead({ 
    source: function (query, process) { 
     return $.ajax({ 
      url: $('#myTypeahead').data('link'), 
      type: 'post', 
      data: { query: query }, 
      dataType: 'json', 
      success: function (result) { 

       var resultList = result.map(function (item) { 
        var aItem = { id: item.Id, name: item.Name }; 
        return JSON.stringify(aItem); 
       }); 

       return process(resultList); 

      } 
     }); 
    }, 

matcher: function (obj) { 
     var item = JSON.parse(obj); 
     return ~item.name.toLowerCase().indexOf(this.query.toLowerCase()) 
    }, 

    sorter: function (items) {   
     var beginswith = [], caseSensitive = [], caseInsensitive = [], item; 
     while (aItem = items.shift()) { 
      var item = JSON.parse(aItem); 
      if (!item.name.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(JSON.stringify(item)); 
      else if (~item.name.indexOf(this.query)) caseSensitive.push(JSON.stringify(item)); 
      else caseInsensitive.push(JSON.stringify(item)); 
     } 

     return beginswith.concat(caseSensitive, caseInsensitive) 

    }, 


    highlighter: function (obj) { 
     var item = JSON.parse(obj); 
     var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&') 
     return item.name.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) { 
      return '<strong>' + match + '</strong>' 
     }) 
    }, 

    updater: function (obj) { 
     var item = JSON.parse(obj); 
     $('#IdControl').attr('value', item.id); 
     return item.name; 
    } 
}); 

Answer 2

नोट: मैंने देखा @ EralpB`s टिप्पणी "यह अभी भी सबसे अच्छा तरीका यह कार्य को पूरा करने है?"

हाँ, @Gonzalo समाधान काम करता है, लेकिन यह (बैसाखी की तरह, विशेष रूप से jQuery-स्वत: पूर्ण उपयोग करने के बाद) अजीब लगता है - यह "बॉक्स से" काम करना चाहिए .Better इस का उपयोग करने के लिए है - Bootstrap-3-Typeahead। प्रारूप - [{आईडी:: ...: .., नाम} यह एक परिणाम के रूप में ऑब्जेक्ट की श्रेणी का समर्थन करता है, ..., {आईडी: .., नाम: ... }]। OP`s जारी करने के लिए उदाहरण:

.... 
source: function (query, process) { 
    return $.ajax({ 
     ...... 
     success: function (result) {    
      var resultList = []; 

      $.map(result,function (Id,value) { 
       var aItem = { id: Id, name: value}; 
       resultList.push(aItem); 
      }); 

      return process(resultList); 
     } 
    }); 
    },