बूटस्ट्रैप टाइपहेड केवल सूची मानों की अनुमति दें

Question

क्या बूटस्ट्रैप टाइपहेड आइटम के लिए पूर्वनिर्धारित डेटा-स्रोत आइटम में उपयोगकर्ता के चयन को सीमित करना संभव है? तो यदि उपयोगकर्ता डेटा-स्रोत में कुछ ऐसा नहीं है, तो उन्हें एक संदेश प्रदर्शित किया जा रहा है? http://cruiseoutlook.com/test

Answer 1

तो मैं समझता हूँ, जब Typeahead घटक फोकस खो देता है, उपयोगकर्ता को सतर्क कर दिया जाना चाहिए कि अपने इनपुट अमान्य है अगर यह सूची में नहीं है:

यहाँ डेमो है?

var myData = [...]; // This array will contain all your possible data for the typeahead 

$("#my-type-ahead").typeahead({source : myData}) 
        .blur(validateSelection); 

function validateSelection() { 
    if(source.indexOf($(this).val()) === -1) 
     alert('Error : element not in list!'); 
} 

बस तथ्य यह है कि indexOf IE6-8 में लागू नहीं है के बारे में सावधान रहना होगा:

कोड इस प्रकार कुछ इस तरह हो जाएगा। लेकिन shims पाया जा सकता है, उदाहरण के लिए: Best way to find if an item is in a JavaScript array?।

Answer 2

jquery और सैमुअल के समाधान का उपयोग करके मुझे लगता है कि आप आईई समस्या से उबरेंगे। करने के लिए अपने validateSelecion समारोह बदलें:

function validateSelection() { 
    if ($.inArray($(this).val(), myData) === -1) 
     alert('Error : element not in list!'); 
} 

बाकी छोड़ दो क्योंकि शमूएल ने कहा।

Answer 3

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

var myData = new Bloodhound({ 
    remote: { 
     url: '/my/path/%QUERY.json', 
     ajax: { 
      complete: function(response){ 
       response.responseJSON.forEach(function (item) { 
        if (myData.valueCache.indexOf(item.value) === -1) { 
         myData.valueCache.push(item.value); 
        } 
       }); 
      } 
     } 
    } 
}); 
myData.valueCache = []; 
myData.initialize(); 

$('#artists .typeahead').typeahead(null, { 
    source: myData.ttAdapter() 
}).bind('change blur', function() { 
    if (myData.valueCache.indexOf($(this).val()) === -1) { 
     $(this).val(''); 
    } 
}); 

Answer 4

मैं थोड़ा अलग तरह से इस समस्या का समाधान - समय की सबसे आप सुझाए गए विकल्पों में आईडी पर कब्जा करने,, बाद में एक वेब सेवा कॉल करने के लिए पोस्ट करने के लिए आदि की जरूरत है

मैं बाहर खाली करने का निर्णय लिया एक छुपा फ़ील्ड जब टाइपएहेड एसिंक कॉल प्रारंभ होता है, और छिपे हुए फ़ील्ड का मान datum.id पर स्वत: पूर्ण या चयनित टाइपहेड ईवेंट पर सेट करता है।

फॉर्म सबमिट करते समय, मैं बस जांचता हूं कि छुपा फ़ील्ड का मूल्य है या नहीं, अगर ऐसा नहीं होता है, तो उपयोगकर्ता ने कभी भी सुझाए गए विकल्प का चयन नहीं किया है।

मैं Typeahead क्षेत्र के नाम पर आधारित यह करने के लिए एक _ id जोड़कर छिपी हुई फ़ील्ड नाम है, और उसके बाद जोड़कर onAutocompleted में इस कोड और onSelected कार्यों

मैं उन कार्यों निर्दिष्ट प्रयोग किया है:

.on('typeahead:selected', onAutocompleted) 
.on('typeahead:autocompleted', onSelected) 

कोड में जो इनपुट फ़ील्ड में .typehead कार्यक्षमता जोड़ता है।

var n = $(this).attr('name')+'_id'; 
$('input[name="' + n + '"]').val(datum.id); 

वहाँ तीन पैरामीटर स्वतः पूर्ण और चयनित काम करता है, घटना, गृहीत, और नाम के लिए पारित कर रहे हैं होने के बारे में Typeahead प्रलेखन वार्ता, लेकिन मैं नाम कभी नहीं देखा था पारित किया जा रहा है, और यही कारण है कि मैं प्रयोग किया जाता है फ़ील्ड का नाम पाने के लिए $ (यह) .attr ('name') तंत्र।