Select2 Dropdown autoselect, если доступно только 1 опция

Question

У меня есть раскрывающийся список select2 с использованием удаленного источника данных.

Что бы я хотел сделать, это если/когда есть только один вариант, возвращаемый поиском, автоматически выберите его. т.е. пользователь не должен нажать на опцию, чтобы сделать выбор.

$("#searchInfo_Entity_Key").select2({ 
ajax: { 
    url: "/Adjustment/GetEntity", 
    dataType: 'json', 
    delay: 250, 
    data: function (params) { 
     return { 
      term: params.term, // search term  
     }; 
    }, 
    processResults: function (data) { 
     return { 
      results: data 
     }; 
    }, 
    results: function (data) { 
     return { results: data }; 
    }, 
}, 
initSelection: function (element, callback) { 
    var data = []; 
    callback(data); 
}, 
minimumInputLength: 2, 
allowClear: true, 
placeholder: "Select an entity" 

});

Answer 1

Это настраиваемый соединитель, который обходит вокруг стандартного соединителя и подсчитывает, сколько совпадений есть. Если есть только одно совпадение, то он выберет это совпадение, изменит его и закроет раскрывающийся список.

(Не тестировался с удаленными данными.)

$(function() { 
 
    
 
    var matchCount = 0; // Track how many matches there are 
 
    var matched; // Track the ID of the last match 
 
    
 
    $('select').select2({ 
 
    placeholder: 'Product Search', 
 
    allowClear: true, 
 
    matcher: function(params, data) { 
 
     // Wrap the default matcher that we have just overridden. 
 
     var match = $.fn.select2.defaults.defaults.matcher(params, data); 
 
      
 
     // If this is the first option that we are testing against, 
 
     // reset the matchCount to zero. 
 
     var first = $(data.element).closest('select').find('option').first().val(); 
 
     if (first == data.id) matchCount = 0; 
 
     
 
     // If there was a match against this option, record it 
 
     if (match) { 
 
     matchCount = matchCount + 1; 
 
     matched = data.id; 
 
     } 
 
     
 
     // If this is the last option that we are testing against, 
 
     // now is a good time to check how many matches we had. 
 
     var last = $(data.element).closest('select').find('option').last().val(); 
 
     if (last == data.id && matchCount == 1) { 
 
     
 
     // There was only one match, change the value to the 
 
     // matched option and close the dropdown box. 
 
     $(data.element).closest('select') 
 
      .val(matched).trigger('change') 
 
      .select2('close'); 
 
     return null; 
 
     } 
 
     
 
     // Return the default match as normal. Null if no match. 
 
     return match; 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> 
 

 
<select style="width: 20em"> 
 
    <option value=""></option> 
 
    <option value="100">Product One</option> 
 
    <option value="200">Product Two</option> 
 
    <option value="300">Product Three</option> 
 
    <option value="400">Product Four</option> 
 
    <option value="500">Product Five</option> 
 
</select>