select2 ajax 显示结果但不能 select

Question

我正在使用带有远程 ajax 数据的 select2 插件。我可以在下拉列表中看到结果，但看不到 select。我希望结果 selectable 并在 selection 之后放入字段中。我认为问题在于传递 id，我不知道如何正确传递它。有什么想法吗？

my json for ?tag_word=for ...没有id

results: [{text: "fort"}, {text: "food"}]

这里是代码：

    <select class="js-data-example-ajax" style="width:100%">
      <option selected="selected">asdasd</option>
    </select>

    <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
    <script type="text/javascript" src="{% static 'js/select2.js' %}"></script>
    <script >
    $(document).ready(function(){
    $('.js-data-example-ajax').select2({
    minimumInputLength: 2,
    multiple:true,
    delay: 250,
    cache: true,
    ajax: {
      url: '/tags/search/autocomplete/',
      dataType: 'json',
      data: function (parms, page) { return { tag_word: parms.term }; },
    },
  });
});  
    </script>

这是服务器代码：

def autocomplete(request):
s = SearchQuerySet(using='autocomplete')
sqs = s.autocomplete(content_auto=request.GET.get('tag_word'))[:5]
suggestions = [  {'text':result.tag_word,
                    'id':result.tag_word,} for result in sqs]
the_data = json.dumps({
    'results': suggestions
})
return HttpResponse(the_data, content_type='application/json')

Answer 1

这是因为你得到的所有id都是空的。更改为数字。单击获取选择按钮以查看将仅传递 ids。

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

$(document).ready(function(){

    $('.js-data-example-ajax').select2({
    minimumInputLength: 2,
    multiple:true,
    delay: 250,
    data: data


  });
});

$(".checkoutput").click(function(){
console.log($('.js-data-example-ajax').val());
})

这是JSFIDDLE

Answer 2

关于您关于 Alaksandar 的回答的最后一个问题，请尝试像这样添加他的代码：

$('.js-data-example-ajax').select2({
    minimumInputLength: 2,
    multiple:true,
    delay: 250,
    cache: true,
    ajax: {
        url: '/tags/search/autocomplete/',
        dataType: 'json',
        data: function (parms, page) { return { tag_word: parms.term }; },
        success: function(results){
            for(var i = 0; i < results.length; i++){
                results[i] = {id:i,text:results[i].text}
            }
        }
    },
});

我还没有测试过这些。所以，如果可行，请接受 Aleksandar 的正确答案，而不是这个。

Answer 3

这是一个快速的技巧。不确定如何使用 select2 文档。但是下面的代码在我的本地主机上对我有用。

$(document).ready(function(){
         $.get("json/select.json",function(data){ //specify your url for json call inside the quotes.
             for(var i = 0; i < data.length; i++){
                 data[i]={id:i,text:data[i].text}
             }
            $(".js-data-example-ajax").select2({
                    minimumInputLength: 2,
                    multiple:true,
                    delay: 250,
                    data: data   
            })

    });
}

Answer 4

到select一个选项，每个结果都需要有一个唯一的id。因此，您可以使用以下代码添加 id(processResults).

$('.js-data-example-ajax').select2({
    minimumInputLength: 2,
    multiple:true,
    delay: 250,
    cache: true,
    ajax: {
        url: '/tags/search/autocomplete/',
        dataType: 'json',
        data: function (parms, page) { return { tag_word: parms.term }; },
        processResults: function (data) {
                    data.results.forEach(function (entry, index) {
                        entry.id = ''+index; // Better if you can assign a unique value for every entry, something like UUID
                    });

                    return data;
                },
                cache: true
    },
});

select2 ajax 显示结果但不能 select

select2 ajax shows results but can't select

javascript

jquery

ajax

json

jquery-select2