Ajax अनुरोध के माध्यम से JSON के साथ Select2 का उपयोग कैसे करें?

Question

मेरा Select2 3.4.5 JSON डेटा के साथ काम नहीं कर रहा है।

यहाँ HTML पर मेरा इनपुट बॉक्स है:

<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;
    }
});

मैंने Laravel 4 के साथ एक API बनाया, जो जब भी मैं अपने टेक्स्ट बॉक्स पर कुछ भी लिखता हूं, उसका एक मूल्य मिलता है।

यहाँ परिणाम है अगर मैं अपने पाठ बॉक्स पर "परीक्षण" टाइप करता हूँ:

[{"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}]

मैं अपने Select2 ड्रॉपडाउन में परिणाम नहीं जोड़ सकता। मुझे लगता है कि formatSelectionऔर formatResultसमस्या खड़ी कर रहा रहे हैं, क्योंकि मैं नहीं जानता कि क्या पैरामीटर उस पर रखा जाना चाहिए। मुझे नहीं पता कि कंटेनर, ऑब्जेक्ट और क्वेरी जैसे मानों को कहां से प्राप्त किया जाए और इसे वापस लौटाना चाहिए या मेरी JSON प्रतिक्रिया गलत है?

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

$ .Map के सुझाव के लिए धन्यवाद

— tacos_tacos_tacos

क्या आप "स्लग" पैरामीटर की व्याख्या कर सकते हैं?

— 13

आइटम पूर्ण नाम, स्लग और आईडी गुणों के साथ ऑब्जेक्ट है। यह सिर्फ एक उदाहरण है, कॉपी और पेस्ट।

— तोलो पामर

स्लग यह आइटम की एक वास्तविक संपत्ति है, आपका आइटम, मैंने इसे जोड़ा क्योंकि आप देख सकते हैं कि अतिरिक्त पैरामीटर कैसे जोड़े जा सकते हैं?)

— टोलो पामर

मैं इस त्रुटि jquery.min.js को पुन: प्राप्त करता हूं: 2 अनकैप्ड टाइपर्रर: जब मेरा सर्वर कोई परिणाम नहीं देता है, तो मैं अशक्त की संपत्ति 'लंबाई' नहीं पढ़ सकता।

— सॉप्टेरेनू एलेक्स नोव

Answer 2

के लिए Select2 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

यह काम करने के लिए नहीं मिल सकता है ... :( सर्वर पर कोई कॉल नहीं किया जा रहा है।

— Simanas

इसने धन्यवाद का काम किया, जो गलती मैंने की वह ठीक से idऔर textप्रमुख मूल्यों की मैपिंग नहीं थी ।

— Ja8zyjits

Answer 3

संस्करण 4.0.2 में थोड़ा अलग बस में processResultsऔर result:

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

आप जोड़ना आवश्यक data.itemsमें result। itemsJson नाम है:

{
  "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) कि आपका [ {"id": 1,"text": "One"}, {"id": 2,"text": "Two"} ]

— जसन

एक दीवार के खिलाफ मेरे सिर को कोस रहे हैं और यह साफ हो गया है। धन्यवाद, select2 के लिए प्रलेखन में काफी कमी है।

— नील बी।

Answer 4

यहां मैं आपको अपना उदाहरण देता हूं जिसमें शामिल हैं -> देश का झंडा, शहर, राज्य, देश।

यहाँ मेरा आउटपुट है।

इन दो Cdn js या लिंक को संलग्न करें।

<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>

js स्क्रिप्ट

//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
                    }
                })
            };
        }

    }
});

अपेक्षित JSON प्रतिक्रिया

[
   {
      "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);

मैं इसे Vue के माउंटेड सेक्शन में इस्तेमाल कर रहा था। इसके लिए और समय चाहिए।

Answer 8

यदि अजाक्स अनुरोध को निकाल नहीं दिया गया है, तो कृपया चयनित तत्व में select2 वर्ग की जांच करें। Select2 क्लास को हटाने से वह समस्या ठीक हो जाएगी।