কিভাবে Ajax অনুরোধের মাধ্যমে JSON এর সাথে নির্বাচন 2 ব্যবহার করবেন?

Question

আমার সিলেক্ট ২.৪.৫ জেএসওএন ডেটা নিয়ে কাজ করছে না।

এইচটিএমএলে আমার ইনপুট বাক্সটি এখানে:

<input class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' />

... এবং আমার জাভাস্ক্রিপ্ট

$(".itemSearch").select2({
    placeholder: "Search for an Item",
    minimumInputLength: 2,
    ajax: {
        url: "/api/productSearch",
        dataType: 'json',
        quietMillis: 100,
        data: function (term, page) {
            return {
                option: term
            };
        },
        results: function (data, page) {
            var more = (page * 10) < data.total;
            return {
                results: data.itemName,
                more: more
            };
        }
    },
    formatResult: function (data, term) {
        return data;
    },
    formatSelection: function (data) {
        return data;
    },
    dropdownCssClass: "bigdrop",
    escapeMarkup: function (m) {
        return m;
    }
});

আমি লারাভেল 4 দিয়ে একটি এপিআই তৈরি করেছি যা যখনই আমি আমার পাঠ্য বাক্সে কিছু টাইপ করি তখন একটি মান দেয়।

আমি আমার পাঠ্য বাক্সে "পরীক্ষা" টাইপ করলে ফলাফল এখানে:

[{"itemName":"Test item no. 1","id":5},
{"itemName":"Test item no. 2","id":6},
{"itemName":"Test item no. 3","id":7},
{"itemName":"Test item no. 4","id":8},
{"itemName":"Test item no. 5","id":9},
{"itemName":"Test item no. 6","id":10},
{"itemName":"Test item no. 7","id":11}]

আমি আমার সিলেক্ট 2 ড্রপডাউনটিতে ফলাফল যুক্ত করতে পারছি না। আমি মনে করি formatSelectionএবং formatResultসমস্যা সৃষ্টি করছে কারণ আমি জানি না যে এটিতে কী কী পরামিতি স্থাপন করা উচিত। আমি জানি না যে ধারক, অবজেক্ট এবং ক্যোয়ারীর মতো সেই প্যারামিটারগুলি এবং এটির মানগুলি ফিরে আসবে কোথায়, বা আমার জেএসএন প্রতিক্রিয়াটি ভুল?

Answer 1

এখানে আপনার একটি উদাহরণ আছে

$("#profiles-thread").select2({
    minimumInputLength: 2,
    tags: [],
    ajax: {
        url: URL,
        dataType: 'json',
        type: "GET",
        quietMillis: 50,
        data: function (term) {
            return {
                term: term
            };
        },
        results: function (data) {
            return {
                results: $.map(data, function (item) {
                    return {
                        text: item.completeName,
                        slug: item.slug,
                        id: item.id
                    }
                })
            };
        }
    }
});

এটা বেশ সহজ

Comments

Ma। ম্যাপ

— tacos_tacos_tacos

আপনি কি "স্লাগ" পরামিতিটি ব্যাখ্যা করতে পারেন?

— আইসডড্যান্ট

আইটেমটি সম্পূর্ণ নাম, স্লাগ এবং আইডি বৈশিষ্ট্যগুলির সাথে অবজেক্ট। এটি কেবল একটি উদাহরণ, অনুলিপি এবং পেস্ট করুন।

— টলো পামার

স্লাগ এটি আইটেমের সত্যিকারের সম্পত্তি, আপনার আইটেমটি, আমি কীভাবে অতিরিক্ত পরামিতি যুক্ত করতে পারি তা দেখতে আমি এটি যোগ করেছি;)

— টলো পামার

আমি এই ত্রুটিটি jquery.min.js: পুনরুদ্ধার করি: 2 আনকচড টাইপ এরির: আমার সার্ভারের কোনও ফলাফল না পেলে নালীর সম্পত্তি 'দৈর্ঘ্য' পড়তে পারি না।

— সপ্তারানু অ্যালেক্স

Answer 2

জন্য v4.0.0 কিছুটা আলাদা

$(".itemSearch").select2({
    tags: true,
    multiple: true,
    tokenSeparators: [',', ' '],
    minimumInputLength: 2,
    minimumResultsForSearch: 10,
    ajax: {
        url: URL,
        dataType: "json",
        type: "GET",
        data: function (params) {

            var queryParameters = {
                term: params.term
            }
            return queryParameters;
        },
        processResults: function (data) {
            return {
                results: $.map(data, function (item) {
                    return {
                        text: item.tag_value,
                        id: item.tag_id
                    }
                })
            };
        }
    }
});

Comments

এটি কাজ করে পেতে পারে না ... :( সার্ভারে কোনও কল করা হচ্ছে না

— সিমানাস

ধন্যবাদ ধন্যবাদ, আমি যে ভুলটি করেছিলাম তা সঠিকভাবে মানচিত্র তৈরি করা হয়নি idএবং textমূল মানগুলি ছিল না ।

— Ja8zyjits

Answer 3

সংস্করণে ২.০.২ কিছুটা আলাদা processResultsএবং ঠিক তেমন result:

    processResults: function (data) {
        return {
            results: $.map(data.items, function (item) {
                return {
                    text: item.tag_value,
                    id: item.tag_id
                }
            })
        };
    }

আপনি যোগ করতে হবে data.itemsসালে result। itemsজসন নাম:

{
  "items": [
    {"id": 1,"name": "Tetris","full_name": "s9xie/hed"},
    {"id": 2,"name": "Tetrisf","full_name": "s9xie/hed"}
  ]
}

Comments

তাহলে আমি অপসারণ itemsথেকে data.itemsআমি যোগ করতে প্রয়োজন হত না itemsপ্রতিক্রিয়া ডান দিকে অ্যাট্রিবিউট? ;)

— ইয়ানা আগুন সিসওয়ান্তো

@bekicot হ্যাঁ, আপনি শুধু শুধু উল্লেখ $.map(data, function (item) যদি আপনার JSON একটি অ্যারের হল:[ {"id": 1,"text": "One"}, {"id": 2,"text": "Two"} ]

— Tantowi মোস্তফা

একটি প্রাচীর বিরুদ্ধে আমার মাথা ধাক্কা এবং এই পরিষ্কার জিনিস আপ হয়েছে। ধন্যবাদ, নির্বাচন 2 এর জন্য ডকুমেন্টেশনের মারাত্মক অভাব রয়েছে।

— নীল বি

Answer 4

এখানে আমি আপনাকে আমার উদাহরণ দিচ্ছি - যা দেশের পতাকা, শহর, রাজ্য, দেশ রয়েছে।

এখানে আমার আউটপুট।

এই দুটি সিডিএন জে বা লিঙ্ক সংযুক্ত করুন।

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>

জেএস স্ক্রিপ্ট

//for apend flag of country.

function formatState (state) {
    console.log(state);
    if (!state.id) {
      return state.text;
    }
    var baseUrl = "admin/images/flags";
    var $state = $(
      '<span><img src="'+baseUrl+ '/' + state.contryflage.toLowerCase() + '.png"  class="img-flag" /> ' +state.text+ '</span>'
    );
    return $state;
  };


$(function(){
    $("#itemSearch").select2({
    minimumInputLength: 2,
    templateResult: formatState, //this is for append country flag.
    ajax: {
        url: URL,
        dataType: 'json',
        type: "POST",
        data: function (term) {
            return {
                term: term
            };
        },
        processResults: function (data) {
            return {
                results: $.map(data, function (item) {
                    return {
                        text: item.name+', '+item.state.name+', '+item.state.coutry.name,
                        id: item.id,
                        contryflage:item.state.coutry.sortname
                    }
                })
            };
        }

    }
});

প্রত্যাশিত জেএসওএন প্রতিক্রিয়া।

[
   {
      "id":7570,
      "name":"Brussels",
      "state":{
         "name":"Brabant",
         "coutry":{
            "sortname":"BE",
            "name":"Belgium",

         }
      }
   },
   {
      "id":7575,
      "name":"Brussels",
      "state":{
         "name":"Brabant Wallon",
         "coutry":{
            "sortname":"BE",
            "name":"Belgium",

         }
      }
   },
   {
      "id":7578,
      "name":"Brussel",
      "state":{
         "name":"Brussel",
         "coutry":{
            "sortname":"BE",
            "name":"Belgium",

         }
      }
   },

]

Comments

তবে আমি `ডেটাতে বিভ্রান্তিকর: ফাংশন (টার্ম) {রিটার্ন {টার্ম: টার্ম}; }, `

— বিকাশ কাটারিয়া

Answer 5

এইভাবে আমি আমার সমস্যাটি স্থির করেছি, আমি ডেটা ভেরিয়েবলে ডেটা পাচ্ছি এবং উপরের সমাধানগুলি ব্যবহার করে আমি ত্রুটি পাচ্ছিলাম could not load results। প্রক্রিয়া ফলাফলগুলিতে আমাকে ফলাফলগুলি পৃথকভাবে পার্স করতে হয়েছিল।

searchBar.select2({
            ajax: {
                url: "/search/live/results/",
                dataType: 'json',
                headers : {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                delay: 250,
                type: 'GET',
                data: function (params) {
                    return {
                        q: params.term, // search term
                    };
                },
                processResults: function (data) {
                    var arr = []
                    $.each(data, function (index, value) {
                        arr.push({
                            id: index,
                            text: value
                        })
                    })
                    return {
                        results: arr
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) { return markup; },
            minimumInputLength: 1
        });

Answer 6

ভুল ম্যাপিংয়ের কারণে সমস্যাগুলি হতে পারে। আপনি কি নিশ্চিত যে আপনার ফলাফলটি "ডেটা" তে সেট করেছেন? আমার উদাহরণে, ব্যাকএন্ড কোডটি "আইটেম" কী এর অধীনে ফলাফল দেয়, তাই ম্যাপিংটি দেখতে হবে:

results: $.map(data.items, function (item) {
....
}

এবং না:

 results: $.map(data, function (item) {
    ....
    }

Answer 7

আমি পুরো জিনিসটি গুটিয়ে না ফেলা পর্যন্ত আমার এজাক্স কখনই বরখাস্ত হয় না

setTimeout(function(){ .... }, 3000);

আমি ভ্যু এর মাউন্ট বিভাগে এটি ব্যবহার করছিলাম। এটি আরও সময় প্রয়োজন।

Answer 8

যদি এজাক্স অনুরোধটি বরখাস্ত না করা হয় তবে দয়া করে নির্বাচিত উপাদানগুলিতে সিলেক্ট 2 ক্লাসটি পরীক্ষা করুন। নির্বাচন 2 শ্রেণি অপসারণ করা এই সমস্যার সমাধান করবে।