如何加载 JSON 数据以将其与 select2 插件一起使用

Posted 2023-05-07

【中文标题】如何加载 JSON 数据以将其与 select2 插件一起使用

【英文标题】：How to load JSON data to use it with select2 plugin

【发布时间】：2015-04-05 23:08:51

【问题描述】：

我想为我的项目使用 select2 插件。我遵循 this 示例，但它对我不起作用。

JSON 输出：

[
    "ime":"BioPlex TM",
    "ime":"Aegis sym agrilla",
    "ime":"Aegis sym irriga",
    "ime":"Aegis sym microgranulo",
    "ime":"Aegis sym pastiglia",
    "ime":"Agroblen 15816+3MgO",
    "ime":"Agroblen 18816+3MgO",
    "ime":"Agrobor 15 HU",
    "ime":"Agrocal (Ca + Mg)",
    "ime":"Agrocal (Ca)",
    "ime":"Agrogold",
    "ime":"Agroleaf Power 12525+ME",
    "ime":"Agroleaf Power 151031+ME",
    "ime":"Agroleaf Power 202020+ME",
    "ime":"Agroleaf Power 311111+ME",
    "ime":"Agroleaf Power Ca",
    "ime":"Agrolution 14714+14 CaO+ME",
    "ime":"Agrovapno dolomitno",
    "ime":"Agrovit HSF",
    "ime":"Agrovit P",
    "ime":"Agrozin 32 T",
    "ime":"Albatros Hydro",
    "ime":"Albatros Sprint",
    "ime":"Albatros Standard",
    "ime":"Albatros Universal",
    "ime":"Algaren",
    "ime":"AlgoVital ? Plus",
    "ime":"Amalgerol PREMIUM",
    "ime":"Amcolon \/ Novalon",
    "ime":"Amcopaste",
    "ime":"Aminosprint N8",
    "ime":"AminoVital",
    "ime":"Ammonium nitrate 33.5%",
    "ime":"Ammonium nitrate with calcium sulfate",
    "ime":"Ammonium sulfate"
]

脚本：

function formatDjubrivo(data) 
    return data;

function formatDjubrivo1(data) 
    return data.ime;

$( "#inputs" ).change(function() 
    console.log('prolazi klik');
    var t = $( this ).val();
    console.log(t);
    if (t=='djubrivo') 
       console.log('prolazi klik if');
       $('#stavka').select2(
          ajax: 
             dataType : "json",
             url      : "djubrivo.php",
             results  : function (data) 
                 return results: data;
             
          ,
          formatResult : formatDjubrivo
       );
    else 
       console.log('nije djubrivo');
    
);

HTML：

<div class="col-md-2" style="padding-right:0px;">
    Vrsta Inputa
    <select id="inputs" name="inputs" class="form-control js-example-responsive">
        <option value="djubrivo">djubrivo</option>
        <option value="pesticidi">pesticidi</option>
        <option value="kultura">kultura</option>
        <option value="voda">voda</option>
    </select>
</div>

<div class="col-md-2" style="padding-right:0px;">
    Stavka
    <input id="stavka" name="stavka" class="form-control js-example-responsive">
</div>

这是我使用console.log 测试代码时的结果：

Select2：AJAX 结果未在响应的results 键中返回数组。

我哪里做错了？

【问题讨论】：

如果你浏览djubrivo.php你会得到json数组？

是的，我得到了这个 JSON：["ime":"BioPlex TM","ime":"Aegis sym agrilla","ime":"Aegis sym irriga" ,"ime":"Aegis sym microgranulo","ime":"Aegis sym Pastiglia","ime":"Agroblen 15816+3MgO","ime":"Agroblen 18816+3MgO" ,"ime":"Agrobor 15 HU","ime":"Agrocal (Ca + Mg)","ime":"Agrocal (Ca)","ime":"Agrogold" ,"ime":"Agroleaf Power 12525+ME","ime":"Agroleaf Power 151031+ME","ime":"Agroleaf Power 202020+ME","ime":" Agroleaf Power 311111+ME" 等 ... ...

有些东西从 3.4.2 版本有所改变，因为我可以以同样的方式加载 JSON，但是现在当我尝试 4.0.0 版本时，这不起作用......而且我的 json 数组输出很好。 .. 与文档上的相同

【参考方案1】：

从您提供的示例链接和您收到的错误消息来看，您似乎正在使用 Select2 4.0。但是，您的代码是为以前版本的 Select2 编写的。

如果你想继续使用Select2 4.0：

(1) 将results ajax 选项更改为processResults。

(2) 更改processResults 函数，使其返回的对象的results 属性是一个对象数组，其中每个对象都有一个id 和一个text 属性。一种方法是使用 $.map() 函数从 ajax 调用返回的数组创建一个新数组。

processResults: function (data) 
    return 
        results: $.map(data, function(obj) 
            return  id: obj.ime, text: obj.ime ;
        )
    ;

你也可以去掉formatResult选项。

(3) 使用<select> 元素，而不是<input> 元素。

<select id="stavka" name="stavka" class="form-control js-example-responsive"></select>

jsfiddle

【讨论】：

谢谢现在可以工作了，但是为什么当我点击 select2 字段时我不能使用搜索字段？我什么都不会输入

@dertdetg - 你的意思是在 jsfiddle 中吗？您可以在 jsfiddle 中的搜索字段中键入，但它的值没有被使用。

不，在我的项目本地主机上，我不能在 select2 中使用 serach 字段...为什么？也许是因为它进入了模态引导窗口？？？

@dertdetg - 我在您问题的代码中看不到任何会阻止您在搜索字段中输入的内容。但是，您没有在 ajax 请求中传递搜索字段的值，因此您的代码中没有使用搜索字段。

感谢您的帮助！好的，我该怎么做？ select2 有内置功能吗？

【参考方案2】：

试试这个：

$.getJSON("djubrivo.php", function (json) 
      $("#inputs").select2(
         data: json,
         width: "180px"
      );
 );

示例 json ：

    
      results:
        id:0,text:"enhancement",
        id:1,text:"bug",
        id:2,text:"duplicate",
        id:3,text:"invalid",
        id:4,text:"wontfix"
      
    

【讨论】：

这不是 OP 所要求的。您正在发出一个请求并缓存结果。如果在您的 GET 请求之后创建了一个新的djubrivo，它将不会出现在选择中。

是的，但如果 ajax 加载完整列表会很有帮助.. 不是在打字和代码工作正常的时候