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

Question

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

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

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

I.E.

用户在 "ABC" 中输入，他们会显示 "ABC Company" "ABC Person" 和 "ABC Entity" 的列表以供选择。
用户选择 "ABC Person" 因此他们被带到 ABC 人物页面。
用户发现这不是他们要查找的页面。
用户再次点击搜索框，select2框在搜索词区有"ABC"和"ABC Company""ABC Person"和[=50的列表=] 自动显示（就好像他们刚刚搜索了 "ABC"）。

用户可以退格并输入 "XYZ" 并且 "XYZ Company" "XYZ Person" "XYZ Entity" 的新列表会显示而无需进行任何 ajax 调用。

目前我可以通过编程方式设置搜索词值，但我不知道如何触发 .select2-input 框上的更改事件来打开和加载结果。

Answer 1

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

<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/

知道了：:) 已更新 fiddle：http://jsfiddle.net/abhiklpm/98mhzv5b/1/

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

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

javascript

jquery

jquery-select2