गतिशील रूप से अद्यतन DataList

Question

नहीं दिखाया जाएगा मैं, गतिशील रूप से एक HTML5 DataList अद्यतन करने कर रहा हूँ निम्न स्क्रिप्ट के साथ उपयोगकर्ता प्रकार के रूप में,:

$('#place').on('keyup', function() { 
    $.post('content/php/autocomp.php', { field: 'plaats', val: $('#place').val() }).done(function(response) { 
     $('#autocomp-places').html(response); 
    }); 
}); 

कौन सा सिवाय इसके कि DataList अक्सर अभी प्रदर्शित नहीं करता है ठीक काम करता है । जब मैं तत्व का निरीक्षण करता हूं तो एचटीएमएल वहां होता है लेकिन जैसे ही इसे अद्यतन किया जाता है, डेटलिस्ट को दिखाया नहीं जाता है। मैं इसे दिखाने के लिए कैसे मजबूर कर सकता हूं?

रिकॉर्ड के लिए: यह काम करता है ... मैं चाहता हूं कि यह हमेशा हमेशा नया सुझाव दिखाएगा।

Answer 1

मुझे लगता है कि मुझे इसके लिए एक सभ्य कामकाज मिला है!

1. मैं लिख रहे हों, मैं डेटा प्राप्त करने के लिए कर async httprequests:

   यहाँ मेरी छद्म कोड है।

2. जब डेटा लौटाया जाता है, तो मैं डेटलिस्ट को साफ़ और पुनः पॉप्युलेट करता हूं।
3. यदि वर्तमान इनपुट फ़ील्ड अभी भी केंद्रित है, तो इनपुट तत्व पर मैन्युअल रूप से .focus() पर कॉल करें (ऐसा लगता है कि डेटा-सूची पॉपअप व्यवहार होने के लिए मजबूर होना पड़ता है)।

Answer 2

कृपया AJAX की पूर्ण विधि के बजाय सफलता का उपयोग करें और पुनः प्रयास करें।

$('#place').on('keyup', function() { 
    $.post('content/php/autocomp.php', { 
     field: 'plaats', 
     val: $('#place').val() 
    }).success(function (response) { 
     $('#autocomp-places').html(response); 
    }); 
}); 

Answer 3

पहले, मैं इस तरह के jQuery UI autocomplete के रूप में पहले से ही उपलब्ध समाधानों में से एक का उपयोग करने की कोशिश करेगा। यह आपके विकास के समय को कम करेगा और कोड को ठेठ बग से मुक्त कर देगा (भविष्य में किसी और के काम से लाभ प्राप्त करने का उल्लेख नहीं करना)।

तुम सच में अपने स्वयं के संस्करण बनाने के लिए चाहते हैं, तो मुझे यकीन है कि बनाना होगा सूची साफ़ कर दी और निम्न कोड के साथ repopulated है:

$('#place').on('keyup', function() { 
    var posting = $.post('content/php/autocomp.php', { field: 'plaats', val: $('#place').val() }); 
    posting.done(function(data) { 
    $('#autocomp-places').empty().append(data); 
    }); 
});