ডেটালিস্ট লেবেল দেখান তবে আসল মান জমা দিন

Question 1

বর্তমানে এইচটিএমএল 5 <datalist>এলিমেন্ট বেশিরভাগ প্রধান ব্রাউজারগুলিতে সমর্থিত (সাফারি বাদে) এবং একটি ইনপুটটিতে পরামর্শ যুক্ত করার একটি আকর্ষণীয় উপায় বলে মনে হয়।

তবে, valueএট্রিবিউটটি প্রয়োগ করার জন্য এবং এর অভ্যন্তরীণ পাঠ্যের মধ্যে কিছু তফাত আছে বলে মনে হচ্ছে <option>। উদাহরণ স্বরূপ:

<input list="answers" name="answer">
<datalist id="answers">
  <option value="42">The answer</option>
</datalist>

এটি বিভিন্ন ব্রাউজার দ্বারা আলাদাভাবে পরিচালনা করা হয়:

ক্রোম এবং অপেরা:
ক্রোম / অপেরাতে ডেটালিস্ট

ফায়ারফক্স এবং আইই 11:
ফায়ারফক্সে ডেটালিস্ট

একটি নির্বাচন করার পরে, ইনপুটটি ভরের সাথে ভরাট হয় না অভ্যন্তরীণ পাঠ্যকে। আমি কেবল চাই যে ব্যবহারকারীটি ড্রপডাউন এবং ইনপুটটিতে পাঠ্যটি ("উত্তর") দেখতে পাবে, তবে একটি মানচিত্রের 42মতো জমা দেওয়ার মানটি পাস করুন select।

আমি কীভাবে সমস্ত ব্রাউজারগুলিতে ড্রপডাউন তালিকাটি গুলিগুলির লেবেলগুলি (অভ্যন্তরীণ পাঠ্য) প্রদর্শন করতে পারি <option>, তবে valueফর্মটি জমা দেওয়ার পরে বৈশিষ্ট্যটি প্রেরণ করতে পারি?

Question 2

নোট যে datalistএকটি হিসাবে একই নয় select। এটি ব্যবহারকারীদের এমন একটি কাস্টম মান প্রবেশের অনুমতি দেয় যা তালিকায় নেই এবং এটি প্রথমে সংজ্ঞা না দিয়ে এই জাতীয় ইনপুটটির জন্য বিকল্প মান পাওয়া অসম্ভব।

ব্যবহারকারীর ইনপুট হ্যান্ডেল করার সম্ভাব্য উপায়গুলি হ'ল প্রবেশমূল্যটি যথাযথভাবে জমা দেওয়া, একটি ফাঁকা মান জমা দেওয়া বা জমা দেওয়া বাধা দেওয়া। এই উত্তরটি কেবল প্রথম দুটি বিকল্প পরিচালনা করে।

আপনি যদি পুরোপুরি ব্যবহারকারীর ইনপুটটিকে অস্বীকার করতে চান selectতবে সম্ভবত এটি আরও ভাল পছন্দ।

optionড্রপডাউনটিতে কেবলমাত্র পাঠ্যের মানটি দেখানোর জন্য আমরা এর জন্য অভ্যন্তরীণ পাঠ্যটি ব্যবহার করি এবং valueবৈশিষ্ট্যটি রেখে দিই । আমরা আসল মানটি যেটি বরাবর প্রেরণ করতে চাই তা একটি কাস্টম data-valueঅ্যাট্রিবিউটে সংরক্ষণ করা হয় :

এটি জমা দেওয়ার data-valueজন্য আমাদের একটি ব্যবহার করতে হবে <input type="hidden">। এক্ষেত্রে আমরা name="answer"নিয়মিত ইনপুটটি ছেড়ে দিয়ে লুকানো অনুলিপিটিতে স্থানান্তরিত করি।

<input list="suggestionList" id="answerInput">
<datalist id="suggestionList">
    <option data-value="42">The answer</option>
</datalist>
<input type="hidden" name="answer" id="answerInput-hidden">

এইভাবে, যখন মূল ইনপুটটিতে পাঠ্য পরিবর্তন হয় তখন আমরা জাভাস্ক্রিপ্ট ব্যবহার করে পাঠ্যটি উপস্থিত রয়েছে কিনা তা যাচাই করতে datalistএবং এরটি আনতে পারি data-value। এই মানটি লুকানো ইনপুটটিতে sertedোকানো এবং জমা দেওয়া হয়।

document.querySelector('input[list]').addEventListener('input', function(e) {
    var input = e.target,
        list = input.getAttribute('list'),
        options = document.querySelectorAll('#' + list + ' option'),
        hiddenInput = document.getElementById(input.getAttribute('id') + '-hidden'),
        inputValue = input.value;

    hiddenInput.value = inputValue;

    for(var i = 0; i < options.length; i++) {
        var option = options[i];

        if(option.innerText === inputValue) {
            hiddenInput.value = option.getAttribute('data-value');
            break;
        }
    }
});

আইডি answerএবং answer-hiddenনিয়মিত এবং লুকানো ইনপুটটিতে স্ক্রিপ্টের জন্য কোন ইনপুটটি কোন লুকানো সংস্করণের অন্তর্ভুক্ত তা জানতে প্রয়োজনীয়। inputএক বা একাধিক datalistএর পরামর্শ সরবরাহের মাধ্যমে একই পৃষ্ঠায় একাধিক গুলি থাকা সম্ভব ।

যে কোনও ব্যবহারকারীর ইনপুট যেমন জমা দেওয়া হয়। ব্যবহারকারী ইনপুট যখন ডেটালিস্টে উপস্থিত না থাকে একটি খালি মান জমা দিতে, এতে পরিবর্তন hiddenInput.value = inputValueকরুনhiddenInput.value = ""

ওয়ার্কিং জেএসফিডেল উদাহরণ: সরল জাভাস্ক্রিপ্ট এবং jQuery

Question 3

সমাধানটি আমি ব্যবহার করি:

<input list="answers" id="answer">
<datalist id="answers">
  <option data-value="42" value="The answer">
</datalist>

তারপরে জাভা স্ক্রিপ্টটি ব্যবহার করে সার্ভারে প্রেরণযোগ্য মানটি অ্যাক্সেস করুন:

var shownVal = document.getElementById("answer").value;
var value2send = document.querySelector("#answers option[value='"+shownVal+"']").dataset.value;

আশা করি এটা সাহায্য করবে.

Question 4

আমি বুঝতে পারি এটি কিছুটা দেরিতে হতে পারে তবে আমি হোঁচট খেয়েছি এবং একাধিক অভিন্ন মূল্যবোধের সাথে পরিস্থিতিগুলি কীভাবে পরিচালনা করব তা ভাবছিলাম, তবে বিভিন্ন কী (বিগবারজু এর মন্তব্য অনুসারে)।

সুতরাং আমি স্টিফান মুলারের উত্তরকে কিছুটা সংশোধন করেছি:

অ-অনন্য মান সহ একটি ডেটালিস্ট:

<input list="answers" name="answer" id="answerInput">
<datalist id="answers">
  <option value="42">The answer</option>
  <option value="43">The answer</option>
  <option value="44">Another Answer</option>
</datalist>
<input type="hidden" name="answer" id="answerInput-hidden">

ব্যবহারকারী একটি বিকল্প, ব্রাউজার প্রতিস্থাপন নির্বাচন কখন input.valueসঙ্গে valueএর datalistপরিবর্তে বিকল্প innerText।

নীচের কোডটি তার optionসাথে একটি পরীক্ষা করে value, এটি লুকানো ক্ষেত্রের মধ্যে ঠেলা দেয় এবং এর input.valueসাথে প্রতিস্থাপন করে innerText।

document.querySelector('#answerInput').addEventListener('input', function(e) {
    var input = e.target,   
        list = input.getAttribute('list'),
        options = document.querySelectorAll('#' + list + ' option[value="'+input.value+'"]'),
        hiddenInput = document.getElementById(input.getAttribute('id') + '-hidden');

    if (options.length > 0) {
      hiddenInput.value = input.value;
      input.value = options[0].innerText;
      }

});

ফলস্বরূপ ব্যবহারকারী অপশনটির যা বলুক তা দেখতে পায় innerTextতবে option.valueফর্ম জমা দেওয়ার পরে অনন্য আইডি পাওয়া যায়। ডেমো জেএসফিডাল

Question 5

অনুসন্ধানের জন্য বোতামে ক্লিক করার সময় আপনি এটি লুপ ছাড়াই খুঁজে পেতে পারেন।
কেবলমাত্র বিকল্পটিতে আপনার প্রয়োজনীয় মানটির সাথে একটি বৈশিষ্ট্য যুক্ত করুন (পছন্দ করুন id) এবং এটি নির্দিষ্ট সন্ধান করুন search

$('#search_wrapper button').on('click', function(){
console.log($('option[value="'+ 
$('#autocomplete_input').val() +'"]').data('value'));
})

Question 6

পিএইচপি ব্যবহার করে আমি এটি করার জন্য একটি খুব সহজ উপায় খুঁজে পেয়েছি। বলছি, এই জাতীয় কিছু ব্যবহার করুন

<input list="customers" name="customer_id" required class="form-control" placeholder="Customer Name">
            <datalist id="customers">
                <?php 
    $querySnamex = "SELECT * FROM `customer` WHERE fname!='' AND lname!='' order by customer_id ASC";
    $resultSnamex = mysqli_query($con,$querySnamex) or die(mysql_error());

                while ($row_this = mysqli_fetch_array($resultSnamex)) {
                    echo '<option data-value="'.$row_this['customer_id'].'">'.$row_this['fname'].' '.$row_this['lname'].'</option>
                    <input type="hidden" name="customer_id_real" value="'.$row_this['customer_id'].'" id="answerInput-hidden">';
                }

                 ?>
            </datalist>

উপরের কোডটি ফর্মটিকে বিকল্পের আইডি বহন করতে দেয় যা নির্বাচিতও রয়েছে।