Select2 Programmatically set the search conditions and open the drop-down list with the corresponding results (without ajax calls)

Question

I am working on removing ajax calls from select2. I have a static list of objects populating a drop down list. The workflow I'm looking at is ...

• The user presses the select2 button
• User types in the search field (and results are displayed)
• The user makes a choice and a new web page is loaded.

At this point, I want the pre-populated search term to be what the user was originally looking for, so that the user can simply click on the field and pre-populate the list of results that they selected to go to this page. However, I do not want to interfere with the available options in the static list.

those.

• The user types are in "ABC" and they have a list of "ABC Company", "ABC Person" and "ABC Entity", which are available to choose from.

• The user selects “ABC Person” so that they are sent to the ABC Person page.

• The user sees that this is not the page they were looking for.

• The user clicks on the search field again, and in the select2 field there is "ABC" in the search area, and the list of "ABC Company", "ABC Person" and "ABC Entity" is automatically displayed (as if they were just looking for "ABC").

The user can step back and enter "XYZ", and the new list of "XYZ Company" "XYZ Person" "XYZ Entity" appears without any ajax calls.

, , .select2-input, .

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>

(, "B1" ), (: "ABC" )

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

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