jquery और mvc razor

Question

का उपयोग करके delimitir के साथ समस्या मैं एक ही फ़ील्ड में कुछ मान नहीं जोड़ सकता। मैं केवल एक मान का चयन कर सकता हूं, और जब मैं ,, ; या अन्य डिलीमीटर वर्ण इनपुट करता हूं, तो मैं दूसरा चयन नहीं कर सकता। मैं इसे स्वत: पूर्ण के समान काम करना चाहता हूं।

public ActionResult TagName(string q) 
{ 
    var tags = new List<TagModel> 
    { 
     new TagModel {Name = "aaaa", NumberOfUse = "0"}, 
     new TagModel {Name = "mkoh", NumberOfUse = "1"}, 
     new TagModel {Name = "asdf", NumberOfUse = "2"}, 
     new TagModel {Name = "zxcv", NumberOfUse = "3"}, 
     new TagModel {Name = "qwer", NumberOfUse = "4"}, 
     new TagModel {Name = "tyui", NumberOfUse = "5"}, 
     new TagModel {Name = "asdf[", NumberOfUse = "6"}, 
     new TagModel {Name = "mnbv", NumberOfUse = "7"} 
    }; 

    var tagNames = (from p in tags where p.Name.Contains(q) select p.Name).Distinct().Take(3); 

    string content = string.Join<string>("\n", tagNames); 
    return Content(content); 
} 

मैं इन लिपियों का उपयोग कर रहा:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.autocomplete.js")" type="text/javascript"></script> 
<link href="@Url.Content("~/Scripts/jquery.autocomplete.css")" rel="stylesheet" type="text/css" /> 

कोई है

<div class="editor-field"> 
    @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) 
</div> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#Name").autocomplete('@Url.Action("TagName", "Tag")', { 
     minChars: 1, 
     delimiter: /(,|;)\s*/, 
     onSelect: function(value, data){ 
      alert('You selected: ' + value + ', ' + data); 
     } 
    }); 
}); 
</script> 

यह मेरी नियंत्रक से डेटा का उपयोग:

मैं jQuery के साथ एक पाठ बॉक्स के लिए बाध्य है फायरबग में त्रुटि। मेरे कोड में क्या गलत है?

Answer 1

मैं और अधिक हाल jQuery UI autocomplete प्लगइन का उपयोग कर आप की सिफारिश करेंगे। JQuery ui 1.8 को भी नई एएसपी.नेट एमवीसी 3 परियोजनाओं के हिस्से के रूप में वितरित किया जाता है।

जहां तक ​​अपने कोड का संबंध है इस तरह इसे ठीक करने का प्रयास करें:

var url = '@Url.Action("TagName", "Tag")'; 
$('#Name').autocomplete(url, { 
    minChars: 1, 
    multiple: true, 
    formatResult: function(row) { 
     return row[0].replace(/(<.+?>)/gi, ''); 
    } 
}).result(function (event, data, formatted) { 
    alert(!data ? "No match!" : "Selected: " + formatted); 
}); 

Answer 2

स्वत: पूर्ण कार्य है कि jQuery यूआई के साथ शामिल है स्टैंड-अलोन jQuery प्लगइन तुलना में एक अलग कोड प्रारूप है। इस पर विवरण नीचे दिए गए लिंक पर jQuery UI वेबसाइट पर पाया जा सकता है।

http://jqueryui.com/demos/autocomplete/

यहाँ jQuery यूआई स्वत: पूर्ण समारोह

$("#Name").autocomplete({ 
     source: url, 
     minLength: 1, 
     select: function(event, ui) { 
      log(ui.item ? 
       "Selected: " + ui.item.value + " aka " + ui.item.id : 
       "Nothing selected, input was " + this.value); 
     } 
    }); 

Answer 3

फ़ायरबग के साथ समस्याओं के इस प्रकार अनुभवी का एक सरल उदाहरण है।

मैं Firebug कंसोल पर भरोसा नहीं करने के लिए जब तक यह त्रुटि संदेश में शामिल करने का सुझाव

अपने कोड के रूप में की उम्मीद काम नहीं कर रहा है, और फ़ायरबग आप किसी भी त्रुटि संदेश नहीं दिखा रहा है तो यह अपने वेब जाँच करने के लिए समय आ गया है क्रोम में पृष्ठ और देखें कि कंसोल टैब, के भीतर विशेष रूप से अपवाद को प्रबंधित नहीं किया गया है, विशेष रूप से जब आप AJAX का उपयोग कर रहे हैं।

Answer 4

स्वत: पूर्ण का कौन सा संस्करण आप उपयोग कर रहे हैं, jquery ui कोई इसका समर्थन नहीं करता है। विवरण के लिए http://jqueryui.com/demos/autocomplete/#multiple देखें।

यह पृष्ठ से एक SNIPPIT बहु चयन

.autocomplete({ 
     minLength: 0, 
     source: function(request, response) { 
      // delegate back to autocomplete, but extract the last term 
      response($.ui.autocomplete.filter(
       availableTags, extractLast(request.term))); 
     }, 
     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; 
     } 
    }); 

Answer 5

1. एक div (कंटेनर) बनाएं स्थापित करने के लिए है।

2. इसे स्टाइल करें, ताकि यह एक टेक्स्ट क्षेत्र जैसा दिखता हो।

3. अपने टेक्स्ट फ़ील्ड को div के अंदर रखें। इसे छोड़ दो। इसे सीमाएं साफ़ करें। (इसलिए, पाठ फ़ील्ड में कर्सर के साथ, div वास्तव में टेक्स्ट क्षेत्र की तरह दिखाई देगा।)

4. उस क्षेत्र में स्वत: पूर्ण करें।

5. चयन पर, span या div या इस 'TheLabel जैसे कुछ और div (कंटेनर) के अंदर इसे प्रीपेड करें।

   1.Before यह prepending, jQuery .data()

   2.It का उपयोग कर एक अच्छा userinterface कर देगा span में वस्तु को बचाने के।

6. यदि आप करेंगे, तो आप पिछले चयन को हटाने का विकल्प भी दे सकते हैं।