How to use Select2 with JSON via Ajax request

Question

My Select2 3 4 5 is not working with JSON data   Here is my input box on HTML    lt input class  form-control col-lg-5 itemSearch  type  text  placeholder  select item    gt       and my JavaScript      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   lt  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              I made an API with Laravel 4 which returns a value whenever I type anything on my text box   Here s the result if I type  test  on my text box      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     I can t add the result to my Select2 dropdown  I think formatSelection and formatResult are causing the problem because I don t know what parameter should be placed on it  I don t know where to get those parameters like container  object and query and the values it should be returning  or is my JSON response is wrong

User · Accepted Answer

Here you have an example      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                                                                               It s quite easy

User · Answer

In Version 4 0 2 slightly different Just in processResults and in result        processResults  function  data            return               results    map data items  function  item                    return                       text  item tag value                      id  item tag id                                                     You must add data items in result  items is Json name         items           id   1  name    Tetris   full name    s9xie hed          id   2  name    Tetrisf   full name    s9xie hed

User · Answer

My ajax never gets fired until I wrapped the whole thing in   setTimeout function            3000    I was using it in mounted section of Vue  it needs more time

User · Answer

for select2 v4 0 0 slightly different       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

User · Answer

Tthe problems may be caused by incorrect mapping  Are you sure you have your result set in  data   In my example  the backend code returns results under  items  key  so the mapping should look like   results    map data items  function  item             and not    results    map data  function  item

User · Answer

Here I give you my example which contain --  Country flag  City  State  Country   Here is my output     Attach these two Cdn js or links    lt link href  https   cdnjs cloudflare com ajax libs select2 4 0 10 css select2 min css  rel  stylesheet    gt   lt script src  https   cdnjs cloudflare com ajax libs select2 4 0 10 js select2 min js  gt  lt  script gt    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              lt span gt  lt img src    baseUrl        state contryflage toLowerCase       png   class  img-flag    gt     state text    lt  span gt              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                                                                                Expected JSON response                 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

User · Answer

If ajax request is not fired  please check the select2 class in the select element  Removing the select2 class will fix that issue

User · Answer

This is how I fixed my issue  I am getting data in data variable and by using above solutions I was getting error could not load results  I had to parse the results differently in processResults   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

[javascript] How to use Select2 with JSON via Ajax request?

Examples related to javascript

Examples related to json

Examples related to laravel

Examples related to jquery-select2