Select2以编程方式设置搜索条件并打开下拉列表并显示相关结果(无ajax调用)

Question

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

1. 用户单击select2
2. 用户键入搜索框(显示结果)
3. 用户进行选择并加载新网页.

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

IE

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

2. 用户选择"ABC Person",这样他们就会被带到ABC Person页面.

3. 用户发现这不是他们要寻找的页面.

4. 用户再次单击搜索框,并且select2框在搜索项区域中显示"ABC",并自动显示"ABC公司""ABC人员"和"ABC实体"列表(就好像他们只搜索"ABC") .

用户可以退格并输入"XYZ",并且在不进行任何ajax调用的情况下显示"XYZ公司""XYZ人员""XYZ实体"的新列表.

目前我可以以编程方式设置搜索项值,但我无法弄清楚如何在.select2输入框上触发更改事件以获得打开和加载的结果.

Answer 1

为了填充选择框和触发器,我们需要这样:

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

但是在我的代码中我们需要设置option的值(例如:"B1")而不是搜索的术语(例如:"ABC")

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

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