select2 search - chỉ đối sánh các từ bắt đầu với cụm từ tìm kiếm

Question

Tôi đã chuyển từ plugin được chọn sang plugin 2 vì nó hoạt động tốt hơn cho tôi, nhưng tài liệu của nó rất kém khi so sánh với lựa chọn. Bất cứ ai có thể cho tôi biết những gì tùy chọn (s) nên được sử dụng để thực hiện chức năng tìm kiếm select2 để lọc các từ mà chỉ mới bắt đầu với thuật ngữ tìm kiếm (và không chứa nó ở giữa).

Giả sử trường select2 có các tùy chọn sau: chuối, táo, dứa.

Khi người dùng nhập "ứng dụng" (hoặc táo), chỉ cần trả lại quả táo (vì đó là từ duy nhất bắt đầu bằng quả táo). Bây giờ, nó trả về cả táo và dứa.

Sau nhiều tìm kiếm, tôi đã tìm ra rằng một số đối sánh tùy chỉnh cần được sử dụng, nhưng đó là tất cả cho đến nay.

Answer 1

Select2 cung cấp an example in the documentation về cách sử dụng chức năng tùy chỉnh matcher để đối sánh cụm từ tìm kiếm với kết quả tìm kiếm. Ví dụ được đưa ra là trường hợp sử dụng chính xác này.

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

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