Select2 以编程方式设置搜索词并打开包含相关结果的下拉列表(无 ajax 调用）

Select2 Programmatically set search terms and open dropdown with relevant results (no ajax calls)

本文关键字：下拉列表 结果 调用 ajax 包含相 方式 编程 设置 搜索 Select2      更新时间：2023-09-26

我正在努力从select2中删除ajax调用。 我有一个填充下拉列表的对象静态列表。 我正在查看的工作流程是...

  1. 用户点击选择2
  2. 用户在搜索框中键入内容（并显示结果）
  3. 用户进行选择并加载新网页。

此时，我想用用户最初搜索的内容预填充搜索词，以便用户只需单击该框并预先填充他们从中选择的结果列表即可访问此页面。 但是，我不想篡改静态列表中的可用选项。

即

  1. 用户输入"ABC"，他们有一个"ABC公司"ABC人"和"ABC实体"的列表可供选择。

  2. 用户选择"ABC 人员"，以便将他们带到 ABC 人员页面。

  3. 用户看到这不是他们要查找的页面。

  4. 用户再次点击搜索框，select2 框在搜索词区域中有"ABC"，并自动显示"ABC 公司"、"ABC 人员"和"ABC 实体"列表（就像他们刚刚搜索"ABC"一样）。

用户可以退格并输入"XYZ"，然后显示"XYZ

公司"XYZ人"XYZ实体"的新列表，而无需进行任何ajax调用。

目前，我可以通过编程方式设置搜索词值，但我无法弄清楚如何在 .select2-input 框上触发更改事件以获取打开和加载的结果。

为了填充选择框和触发器，我们需要这个：

<select id="e1" style="width:300px;">
    <optgroup label="A1 comps">
       <option value="A1">AAA 1</option>
       <option value="A2">AAA 2</option>
       <option value="A#">AAA 3</option>
       <option value="A4">AAA 4</option>
   </optgroup>
   <optgroup label="B1 comps">
       <option value="B1">BBB 1</option>
       <option value="B2">BBB 2</option>
       <option value="B3">BBB 3</option>
       <option value="B4">BBB 4</option>
   </optgroup>
</select>
<script>
 $(document).ready(function() { 
    $("#e1").val("B1").select2();
    $("#e1").on("select2-opening", function() { 
       $("#e1").on("select2-open", function() { 
         $("#e1").select2("search","BBB");
       });
    });
 });
</script>

但是在我的代码中，我们需要设置选项的值（例如："B1"）而不是搜索的词（例如："ABC"）

http://jsfiddle.net/abhiklpm/98mhzv5b/

知道了：:)更新的小提琴：http://jsfiddle.net/abhiklpm/98mhzv5b/1/

这项工作

对我来说 
<select id="my_select2" data-value="2612"></select>

$input = $('#my_select2')
$.ajax({
    type: 'GET',
    url: url,
    data: {
        term: $input.data('value')
    },
    dataType: 'json',
    cache: false,
    success: function (data) {
        Object.keys(data).forEach(function (index){
            $input.html(`<option value='${data[index].id}'>${data[index].name}</option>`)
        })

        $input.select2({
            width: '100%',
            dir: "rtl",
            ajax: {
                url: url,
                dataType: 'json',
                type: "GET",
                data: function (term) {
                    return term;
                },
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item.name,
                                id: item.id
                            }
                        })
                    };
                }
            },
            escapeMarkup: function (markup) {
                return markup;
            },
            minimumInputLength: 1
        });
    }
});
相关文章：