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”，然后顯示“XYZ 公司”“XYZ 人”“XYZ 實體”的新列表，而無需進行任何 ajax 調用。

目前我可以以編程方式設置搜索詞值，但我不知道如何觸發 .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>

但是在我的代碼中我們需要設置option的值（例如：“B1”）而不是搜索的術語（例如：“ABC”）

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

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

Answer 2

這對我有用

<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
        });
    }
});