Wyszukiwarka select2 - dopasowywanie tylko słów zaczynających się od wyszukiwanego hasła

Question

Migrowałem z wybranej do select2 wtyczki, ponieważ działa ona lepiej dla mnie, ale jej dokumentacja jest bardzo słaba w porównaniu do wybranej. Czy ktokolwiek mógłby mi powiedzieć, jakie opcje powinny być użyte, aby funkcja wyszukiwania select2 filtrowała wyrazy, które zaczynają się od szukanego terminu (i nie zawierają go w środku).

Załóżmy, że pole select2 ma następujące opcje: banan, jabłko, ananas.

Po wprowadzeniu przez użytkownika "aplikacji" (lub jabłka) należy zwrócić tylko jabłko (ponieważ jest to jedyne słowo rozpoczynające się od jabłka). Teraz zwraca zarówno jabłko, jak i ananas.

Po wielu poszukiwaniach zorientowałem się, że trzeba użyć niestandardowego matchera, ale to wszystko do tej pory.

Answer 1

Select2 zapewnia an example in the documentation, jak używać niestandardowej funkcji matcher do dopasowywania wyszukiwanych terminów do wyników wyszukiwania. Podany przykład to ten dokładny przypadek użycia.

function matchStart (term, text) { 
 
    if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) { 
 
    return true; 
 
    } 
 
    
 
    return false; 
 
} 
 
    
 
$.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) { 
 
    $("select").select2({ 
 
    matcher: oldMatcher(matchStart) 
 
    }) 
 
});

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script> 
 

 
<select style="width: 200px"> 
 
    <option value="AL">Alabama</option> 
 
    <option value="AK">Alaska</option> 
 
    <option value="AZ">Arizona</option> 
 
</select>

Answer 2

Wybór2 4.0.0

function matchStart(params, data) { 
 
    params.term = params.term || ''; 
 
    if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) == 0) { 
 
     return data; 
 
    } 
 
    return false; 
 
} 
 

 
$("select").select2({ 
 
    matcher: function(params, data) { 
 
     return matchStart(params, data); 
 
    }, 
 
});