केंडो ऑटोकंपलेट - उपयोगकर्ताओं को वैध चयन करने के लिए मजबूर करें

Question

मेरे पास रिमोट डेटा से जुड़े कुछ केंडो ऑटोकंपलेट फ़ील्ड हैं (सैकड़ों संभावनाएं, इसलिए ड्रॉपडाउनलिस्ट एक विकल्प नहीं है)।

मैं कैसे प्रदर्शित सूची से चयन करने के लिए उपयोगकर्ताओं को मजबूर कर सकते हैं?

मैं भी अतिरिक्त डेटा उस डेटा स्रोत से लौटे है, उदा पुन: प्राप्त करने कर रहा हूँ

$("#station").kendoAutoComplete({ 
    dataSource: stationData, 
    minLength: 2, 
    dataTextField: 'name', 
    select: function(e){ 
     var dataItem = this.dataItem(e.item.index()); 
     console.dir(dataItem); 
    } 
}); 

मैं dataItem में डेटा के साथ अतिरिक्त सामान कर रहा हूँ और यह एक वैध चयन की जरूरत है।

धन्यवाद

हल: मुझे लगता है कि मैं संभवतः ओवर-उलझी बातें थी। इस सवाल का जवाब बहुत सरल है और नीचे पोस्ट किया जाता है।

Answer 1

var valid; 
$("#staton").kendoAutoComplete({ 
    minLength: 2, 
    dataTextField: "name", 
    open: function(e) { 
    valid = false; 
    }, 
    select: function(e){ 
    valid = true; 
    }, 
    close: function(e){ 
    // if no valid selection - clear input 
    if (!valid) this.value(''); 
    }, 
    dataSource: datasource 
}); 

Answer 2

शायद, आप blur घटना का उपयोग करके अपने खुद के सत्यापन कर सकते हैं:

$("#station").blur(function() { 
    var data = stationData, 
     nbData = data.length, 
     found = false; 

    for(var iData = 0; iData < nbData; iData++) { 
     if(this.value === data[iData].yourfieldname) // replace "yourfieldname" by the corresponding one if needed 
      found = true; 
    } 
    console.log(found); 
}); 

आप देख सकते हैं this fiddle।

Answer 3

आप सबसे अधिक संभावना है, जिसमें प्रत्येक कुंजी स्ट्रोक अवरोधन करने के बाद दो प्रतीकों में से न्यूनतम लंबाई को पार कर जाता है, और विकल्प को रोकने के एक चरित्र बना देता है जो प्रवेश करने के लिए कुछ कस्टम तर्क की जरूरत है उपयोगकर्ता स्ट्रिंग किसी भी से आइटम का मेल नहीं स्वतः पूर्ण सूची।

इस उद्देश्य के लिए केंडो स्वत: पूर्ण परिवर्तन की घटना को रोकें और फ़िल्टर किए गए सूची से आइटम के विरुद्ध उपयोगकर्ता से वर्तमान इनपुट मूल्य की तुलना करें।

Answer 4

आशा इस मदद करता है,

$("#autocomplete_id").val(""); 

$("#autocomplete").kendoAutoComplete({ 
    dataSource: datasource, 
    minLength: 1, 
    dataTextField: "catname", 
    dataValueField:"id", 
    select: function(e) {     
     var dataItem = this.dataItem(e.item.index());     
     $("#autocomplete_id").val(dataItem.id); 
    }, 
    dataBound: function(e){ 
     $("#autocomplete_id").val(""); 
    } 
}); 

FYI करें, autocomplete_id एक छिपे हुए स्वत: पूर्ण का मूल्य स्टोर करने के लिए क्षेत्र है। - कभी कभी, हम dataTextField के अलावा अन्य dataValueField करना चाहते हैं। इसलिए, यह अपने उद्देश्य कार्य करता है।

इसमें आप तत्व autocomplete_id से स्वत: पूर्ण "आईडी" का मान प्राप्त कर सकते हैं - जो सर्वरसाइड से डेटाव्यूफ़िल्फ़ है।

डाटाबेस में, इसके मान शून्य पर सेट हैं, और चयन पर, इसे "आईडी" मान असाइन किया गया है।

Answer 5

यह विधि उपयोगकर्ताओं को ऑटोकंपलेट में जो भी पसंद है उसे टाइप करने की अनुमति देती है यदि सूची खुलती नहीं है।

1. झूठे के रूप में चर मान्य प्रारंभ: इसे ठीक करने के दो सुधार कर रहे हैं

   वर वैध = झूठी;

2. जांच करें कि परिवर्तन घटना में कोई मान्य चयन, लेकिन नहीं पास में:

   ... 
   change: function(e){ if (!valid) this.value(''); } 
   

Answer 6

हालांकि accepted answer काम करता है, यह सबसे अच्छा समाधान नहीं है।

प्रदान किया गया समाधान तब ध्यान में नहीं रखता है जब उपयोगकर्ता केंडो ऑटोकंपलेट विजेट से पहले एक मूल्य में प्रवेश करता है, खुली घटना को ट्रिगर करता है। नतीजतन, दर्ज मूल्य मजबूर नहीं है और इसलिए, प्रविष्टि/चयन अमान्य है।

मेरे दृष्टिकोण है कि आवेदन MVCमें चल रहा है मान लिया गया है और सरणी ViewData में पारित हो जाता है। लेकिन यह आपके पर्यावरण के अनुरूप बदलने के लिए बदला जा सकता है।

मेरे दृष्टिकोण:

var validSelect, isSelected; 
$("#staton").kendoAutoComplete({ 
    minLength: 2, 
    filter: "startswith", 
    dataTextField: "name", 
    filtering: function(e) { 
     validSelect = false; 
     dataArr = @Html.Raw(Json.Encode(ViewData["allStatons"])); 
     // for loop within the ViewData array to find for matching ID 
     for (var i = 0; i < dataArr .length; i++){ 
      if (dataArr[i].ID.toString().match("^" + $("#staton").val())) { 
       validSelect = true; 
       break; 
      } 
     } 

     // if value entered was not found in array - clear input 
     if (!validSelect) $("#staton").val(""); 
    }, 
    select: function(e){ 
     isSelected = true; 
    }, 
    close: function(e){ 
     // if selection is invalid or not selected from the list - clear input 
     if (!validSelect || !isSelected) $("#staton").val(""); 
    }, 
    dataSource: datasource 
}); 

आप देख सकते हैं, इस दृष्टिकोण इतना है कि यह विजेट को छानने की घटना के दौरान मिलान कर सकते हैं लोड पर सर्वर साइड से सरणी की आवश्यकता है।

Answer 7

ओपी पोस्ट का जवाब, @ Rock'n'muse द्वारा सुझाए गए उत्तर के अलावा निश्चित रूप से अच्छे प्रस्ताव हैं, लेकिन दोनों एक महत्वपूर्ण और वांछित कार्यात्मक पहलू को याद करते हैं।

जब समाधान @Mat द्वारा दिए गए का उपयोग और @ Rock'n'muse से change -vice- close सुझाव को लागू करने, आपके द्वारा लिखा गया-इन मूल्य वास्तव में विजेट से साफ करता है, तो कोई चयन फ़िल्टर किए गए डेटा स्रोत से बनाया गया है। यह भी खूब रही; हालांकि, यदि उपयोगकर्ता कुछ मान्य टाइप करता है और फ़िल्टर की गई सूची से कोई मान चुनता है, तो फिर कर्सर को मान के अंत में रखता है और मान को अमान्य करता है (किसी भी वैध चयन को वापस नहीं करता है डेटा स्रोत), टाइप-इन मान विजेट से साफ़ नहीं किया गया है।

क्या हो रहा है यह है कि isValid मान true रहता है यदि पहले टाइप किए गए (और मान्य) मान को बदला जाना चाहिए। इसका समाधान फ़िल्टरिंग ईवेंट ट्रिगर होने पर isValid से false पर सेट करना है। जब उपयोगकर्ता टाइप किए गए मान को बदलता है, तो विजेट टाइप किए गए मान की खोज में डेटा स्रोत को फ़िल्टर करने का प्रयास करता है। isValid से false पर सेट करने के साथ ही filter ईवेंट ट्रिगर किया गया है change ईवेंट के लिए "क्लीन स्लेट" सुनिश्चित करता है जैसा कि @ Rock'n'muse से समाधान द्वारा सुझाया गया है।

क्योंकि हम जैसे ही filtering घटना शुरू हो रहा है गलत पर isValid स्थापित कर रहे हैं, हम (से पहले उपयोगकर्ता कभी विकल्प देख सकेंगे चयन करने के लिए डेटा स्रोत को छानने होने चाहिए के रूप में) open घटना में ऐसा करने की जरूरत नहीं है । इस वजह से, open ईवेंट बाध्यकारी @ मैट के समाधान से हटा दिया गया था। इसका अर्थ यह भी है कि isValid की घोषणा पर false का आरंभिक असाइनमेंट अनिवार्य है, लेकिन घोषणा पर परिवर्तनीय असाइनमेंट हमेशा एक अच्छा विचार है। ,

var isValid = false; 
$("#staton").kendoAutoComplete({ 
    minLength: 2, 
    dataTextField: "name", 
    select: function() { 
     valid = true; 
    }, 
    change: function (e) { 
     // if no valid selection - clear input 
     if (!valid) { 
      e.sender.value(""); 
     } 
    }, 
    filtering: function() { 
     valid = false; 
    }, 
    dataSource: datasource 
}); 

एक परिशिष्ट के रूप में स्थापित है और एक का मूल्यांकन करने के लिए बाध्य select घटना का उपयोग कर:

नीचे लागू किया @ Rock'n'muse से और filtering कार्यान्वयन के साथ सुझावों के साथ @Mat से समाधान है @Mat प्रस्तावों के रूप में सरल बूलियन मान अधिक डेटा स्रोत पर एक jQuery $.each(...) का उपयोग करने से क्लीनर, सरल और तेज़ है ताकि यह सुनिश्चित किया जा सके कि टाइप किए गए मान change ईवेंट के भीतर डेटा स्रोत की वास्तविक वस्तु से मेल खाते हैं। @Mat (इस पृष्ठ) से समाधान मिलने से पहले समाधान बनाने में मेरा पहला विचार था और यह मेरा समाधान और उसके प्रश्न को अप-वोट करने का मेरा तर्क है।

Answer 8

मुझे यह परिवर्तन घटना का उपयोग करके टेलीरिक की साइट पर मिला। मेरे लिए यह सबसे अच्छा काम करता है। मैंने "मूल्य === ''" चेक जोड़ा। यह तब होगा जब उपयोगकर्ता चयन को "साफ़ करता है"।

Here's the link to the full article.

 $("#countries").kendoAutoComplete({ 
     dataSource: data, 
     filter: "startswith", 
     placeholder: "Select country...", 
     change: function() { 
      var value = this.value(); 
      if (value === '') return; 
      var found = false; 
      var data = this.dataSource.view(); 

      for(var idx = 0, length = data.length; idx < length; idx++) { 
      if (data[idx] === value) { 
       found = true; 
       break; 
      } 
      } 

      if (!found) { 
      this.value(""); 
      alert("Custom values are not allowed"); 
      } 
     } 
     });