ट्विटर टाइपहेड प्रीफेक्टेड सामग्री के साथ फोर्स चयन

Question

मैं वर्तमान में अपनी वेबसाइट, as seen here के लिए ट्विटर टाइपहेड प्लगइन का उपयोग कर रहा हूं।

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

अब तक मेरे पास है:

$('.cp').typeahead({        
    name: 'nom',               
    prefetch: 'ajax_recherche_ville.php',           
    limit: 50              
}); 

$('.cp').bind('typeahead:selected', function(obj, datum) {   
     $('input:hidden[name=ville_id]').val(datum.id); 
}); 

मैं इस कोड पर लागू होने वाला मजबूर चयन का एक उदाहरण नहीं मिल सकता है - विशेष रूप से, क्योंकि मैं प्रीफ़ेच विधि का उपयोग करें। इसलिए, यदि मूल्य सूची में है, तो मैं मान्य नहीं कर सकता, या कम से कम मुझे अभी तक नहीं पता कि कैसे। इरादे के रूप में कार्य करने के लिए मैं इसे कैसे प्राप्त कर सकता हूं?

Answer 1

मुझे इसके लिए कोई सीधा आगे समाधान नहीं पता है, लेकिन मुझे लगता है कि मैं एक कामकाज प्रदान कर सकता हूं।

आप change() घटना पर छिपे हुए इनपुट साफ कर सकते हैं, यह typeahead:selected घटना पर बाद में अपडेट किए जाएंगे:

$('.cp').typeahead({        
    name: 'nom',               
    prefetch: 'ajax_recherche_ville.php',           
    limit: 50              
}).change(function() { 
    $('input[name=ville_id]').val(''); // don't use :hidden since it slow down performance and doesn't do anything special, I suppose the input with name ville_id is unique 
}).bind('typeahead:selected', function(obj, datum) {   
    $('input[name=ville_id]').val(datum.id); 
}); 

इस विधि का कमजोर कर रहे हैं:

• यह स्पष्ट नहीं है टाइपएड इनपुट अगर उपयोगकर्ता इनपुट कुछ जो स्वत: पूर्ण
• ट्रिगर नहीं करता है तो उपयोगकर्ता को पॉपुल में छिपे हुए इनपुट के लिए स्वत: पूर्ण ड्रॉपडाउन (ट्रिगर typeahead:selected) पर क्लिक करना होगा खा लिया

डेमो: http://jsfiddle.net/hieuh25/zz85q/

आशा है कि यह मदद करता है। मेरा मानना ​​है कि Typeahead सभी के उपयोग के लिए सुविधा क्रीप से बचने के लिए करना चाहते हैं:

Answer 2

मैं तुम्हें कोड सही रास्ते पर है, कुछ संवर्द्धन में जोड़ सकता है संशोधित और पाठ को सही सुनिश्चित करने के लिए अभी भी मान्य

$sourceSelect = @$el.find('[name="source_venue_name"]') 
$sourceSelect.typeahead [ 
    { 
    valueKey: 'name' 
    remote: 
     url: '/apis/venues?q=%QUERY' 
    ] 
    } 
] 

# hidden id 
$sourceId = @$el.find('[name="source_venue_id"]') 

$sourceSelect.on 'typeahead:selected', (e, item) => 
    # set hidden id on selection 
    $sourceId.val item.id 
    # remember selection 
    $sourceSelect.attr 'data-name', item.name 
    $sourceSelect.attr 'data-id', item.id 

$sourceSelect.on 'change',() => 
    # if changed value is same as selected text 
    if $sourceSelect.val() is $sourceSelect.attr 'data-name' 
    $sourceId.val $sourceSelect.attr 'data-id' 
    else # changed to be invalid 
    $sourceId.val '' 

पुनश्च है विश्वास करते हैं मामले https://github.com/twitter/typeahead.js/issues/368