jQuery - स्वत: पूर्ण

Question

में कुंजी/मान जोड़ी का उपयोग करें मेरे एएसपी एमवीसी व्यू में, मैं नियंत्रक से वापस एक कुंजी/मूल्य जोड़ी पास कर रहा हूं। फिडलर को देखने और क्रोम के डीबगर में देखने के बाद मैं देख सकता हूं कि जानकारी सही ढंग से वापस जा रही है।

मैं autocomplete सूची में प्रदर्शित आइटम होने के लिए कुंजी/मान जोड़ी के value के लिए चाहूंगा। जब उपयोगकर्ता सूची से कोई आइटम चुनता है, तो मैं उस आइटम के key को टेक्स्ट बॉक्स में रखना चाहता हूं।

यहाँ मेरे विचार

$(function() { 
    $('#DRMCompanyId').autocomplete({ 
     source: '@Url.Action("compSearch", "AgentTransmission")', 
     minLength: 2, 
     select: function (event, ui) { 
      $('#DRMCompanyId').val(ui.item.label); 
     } 
    }); 
}); 

एक बात मैंने देखा से jQuery कोड है - अगर मैं ब्राउज़र की डीबगर में घड़ी सूची में ui चर जोड़ने मैं देखा कि लेबल और मूल्य में ठीक उसी हैं । फिर भी, मैं देख रहा हूं कि जो कुछ भी वापस किया जा रहा है वह पूर्ण कुंजी/मूल्य जोड़ी है।

खोज पूर्ण होने के बाद नेटवर्क/प्रतिक्रिया कंसोल का एक स्क्रीन शॉट यहां दिया गया है। कुछ डेटा निजी है इसलिए मैंने इसे काला कर दिया, हालांकि आप देख सकते हैं कि एक कुंजी/मूल्य जोड़ी वापस आ रही है।

Answer 1

आप AJAX बनाने के अपने आप को अनुरोध और प्रारूप कि jQueryUI उम्मीद करने के लिए डेटा को बदलने के लिए की आवश्यकता होगी:

$(function() { 
    $('#DRMCompanyId').autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       url: '@Url.Action("compSearch", "AgentTransmission")', 
       type: 'GET', 
       dataType: 'json', 
       data: request, 
       success: function (data) { 
        response($.map(data, function (value, key) { 
         return { 
          label: value, 
          value: key 
         }; 
        })); 
       } 
      }); 
     }, 
     minLength: 2 
    }); 
}); 

इसके अलावा, एक स्वत: पूर्ण आइटम के value संपत्ति स्वचालित रूप में रखा गया है input जब वह आइटम चुना जाता है, तो कस्टम select हैंडलर की आवश्यकता नहीं होनी चाहिए।

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

Answer 2

ऊपर से ही, बिट

सविस्तार

फ़्रंट एंड

<input id="CompanySearch" type="text" /> 

<script> 
    $(function() { 
     $("#CompanySearch").autocomplete({ 
      source: function (request, response) { 
       $.ajax({ 
        url: '@Url.Action("GetCompanyAutoComplete", "Admin")', 
        dataType: "json", 
        data: { term: request.term }, 
        success: function (data) { 
         response(data); 
        } 
       }); 
      }, 
      minLength: 2 
     }); 
    }); 
</script> 

सी #

public JsonResult GetCompanyAutoComplete(string term) 
{ 
    var search = term.Trim(); 

    var itemList = (from items in db.TblProductSuggestionFirsts where items.Name.StartsWith(search) select new { label = items.Name, value = items.Name }).Take(50).ToList(); 

    return Json(itemList, JsonRequestBehavior.AllowGet); 

} 

Json परिणाम स्वरूप