select2 ajax 显示结果但无法选择

Posted 2023-05-07

【中文标题】select2 ajax 显示结果但无法选择

【英文标题】：select2 ajax shows results but can't select

【发布时间】：2015-10-15 11:04:08

【问题描述】：

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

我的 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')

【问题讨论】：

你需要使用$.ajax的success:

【参考方案1】：

要选择一个选项，每个结果都需要有一个唯一的 ID。因此，您可以使用以下代码（processResults）添加 id。

$('.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
    ,
);

【参考方案2】：

这是一个快速破解。不确定如何与 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   
            )

    );

【讨论】：

如果我使用上面的代码，我会得到错误：127.0.0.1:8000/tags/search/autocomplete500 (INTERNAL SERVER ERROR)

好的，我是在服务器端完成的，因为我在客户端找不到解决方案。我刚刚也为 id 添加了相同的属性“tag_word”，而不仅仅是文本。现在是工作

选择正确的答案，这样对在同一基础上搜索的其他人会有所帮助。

【参考方案3】：

这是因为你得到了所有 id 的空值。更改为数字。点击 get selected 按钮可以看到只有 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

【讨论】：

我的 id 为空，这就是你正确的问题。你能解释一下我如何只将 id 值传递给 json 吗？我尝试了您的建议，但无法实现。

//我如何只将 id 值传递给 json// 无法理解您的意思。您需要保留 id 和 text。并且您需要为每个 id 赋予唯一值。

是的，我需要 id 和 text，但我已经得到了文本。我错过了 id，我不知道如何为每个 id 赋予唯一值。我目前的结果：[ text: "fort", text: "food"].. 没有 id。如何为我的结果添加唯一 ID？

[id:0, text: "fort", id:1,text: "food"]。我收到你的问题了吗？

是的，这应该是最终结果，但我使用 ajax 加载 json。我的问题是当我使用远程数据加载并且我没有值数组时如何添加 id 唯一值..

【参考方案4】：

关于 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 的正确答案，而不是这个答案。

【讨论】：

感谢您的建议，但我仍然无法选择项目并且控制台正在显示：结果：[text: "fort", text: "food"]...without id值

你的 parms.term 输出是什么