We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

DropDown with autocomplete and custom sorting

Thread ID:





132919 Sep 28,2017 07:00 AM Sep 29,2017 04:54 AM JavaScript 3
Tags: ejDropDownList
Asked On September 28, 2017 07:00 AM

I would like to implement an DropDown list for countries, where each entry is the iso2 cost of the country , followed by its name , e.g.
CH (Switzerland)
CL (Chile)
CO (Colombia)
The iso code is what my users are using most of the time, therefor it is very fast, but sometime they dont know the iso code, therefore I need to show the full name.
When the user types C the dropdown options should filter on all countries iso codes starting with C ( top of the list) or containing a c in the country name (bottom of the list )
When the user then types an H the dropdown should show CH (Switzerland) followed by all countries containing ch
I would need some kind of autocomplete combine with a custom sorting.
How to achieve this with the dropdown and /or autocomplete ?

Prince Oliver [Syncfusion]
Replied On September 28, 2017 08:30 AM

Hi Frank, 

Thank you for contacting Syncfusion forums. 

In Autocomplete control, we achieve your requirement by setting filterType property to “contains”. You can search in the input box and matching values containing the key will be displayed in the popup. Kindly refer to the following API documentation link for more information: https://help.syncfusion.com/api/js/ejautocomplete#members:filtertype 

    dataSource: states, 
    fields: { key: "index" ,text: "countryName" }, 
    watermarkText: "Select a Code", 
    width: "100%", 
    filterType: 'contains', 
    showPopupButton : true 
In DropDownList control, we need to set enableFilterSearch to true, to use filter search in the control. Kindly refer to the following API documentation for more information: https://help.syncfusion.com/api/js/ejdropdownlist#members:enablefiltersearch 

    dataSource: states, 
    width: "100%", 
    watermarkText: "Select a Code", 
    fields: { text: "countryName", value: "index" }, 
    enableFilterSearch: true  

By default, the filterType will be in “contains” in DropDownList control. Kindly refer to the following UG link for more information on filter search: https://help.syncfusion.com/js/dropdownlist/functionalities#filter-search 
We have prepared a sample for your reference, kindly refer to the following Playground link: http://jsplayground.syncfusion.com/i0ov0zl2 

Replied On September 28, 2017 02:59 PM

Hi Prince 

thanks for the quick reply!

This does the trick for the filtering, however not quite yet for the sorting

in your example if you type G

the order of the filtered results should be

GB (United Kingdom)

DE (Germany)

i.e the sort order should first show the matches on the iso code ( sorted alphabetically) and then the matches on the country name

In select2 one can achieve this with a custom filter and a custom sort function. In the custom filter function one would determine the kind of match ( iso code or country name) and then in the custom sorter function use this to make the iso match come before the country match 

something like this

customFilter(params, data) {
if (!params.term) return data
let newterm = params.term.toUpperCase()
let newtxt = data.text.toUpperCase()
let index = newtxt.indexOf(newterm)
if (index == 0) {
data.matchtype = 1
return data
else if (index > 0) {
data.matchtype = 0
return data
else {
return null

// this sorts the results so that matches on the iso2 code come frist
customSort(data): any {
return data.sort((a, b) => {
if (a.matchtype > b.matchtype) return -1
if (a.matchtype == b.matchtype) {
if (a.text > b.text) return 1
if (a.text == b.text) return 0
return -1
return 1

is this possible with the dropdownlist control ?

Prince Oliver [Syncfusion]
Replied On September 29, 2017 04:54 AM

Hi Frank, 

Thank you for your update. 

To use your custom sorting in our DropDownList control, you need to override the internal _filterSearch method and perform your custom sorting and then bind the sorted list to the DropDownList control. Kindly refer to the following code snippet. 

<script type="text/javascript" class="jsScript"> 
    ej.DropDownList.prototype._filterSearch = function (searchQuery, args) { 
        var flag = false;  
        this.resultList = args.result ? args.result : ej.DataManager(this._rawList).executeLocal(searchQuery); 
        if (this.resultList.length == 0) { 
            flag = true; 
        this.resultList = customSort(this.resultList); 
        this.popupListItems = this.resultList; 
        this._isPlainType(this.popupListItems) ? this._plainArrayTypeBinding(this.resultList) : 
        this._objectArrayTypeBinding(this.resultList, "search"); 
        if (flag && this.ultag.find("li").length == 1) { 
        if (this.model.showCheckbox && !flag) { 
            this._appendCheckbox( this._getLi()); 
        this._onSearch = true; 
        var value = this.value(), visibleText = this._visibleInput[0].value; 
        var checkVal = typeof this.model.value === "function" ? this.model.value() : this.model.value; 
        if(checkVal != value){ 
            this.element[0].value = value; 
            this._visibleInput[0].value = visibleText; 
            this.model.text = visibleText == "" ? null : visibleText; 
            if (this.value() != value && !(this.value() == null && value =="" )) { 
        this._onSearch = false; 
 function customSort(data){ 
    return data.sort((a, b) => { 
        if (a.index > b.index) return -1 
        if (a.index == b.index) { 
        if (a.countryName > b.countryName) return 1 
        if (a.countryName == b.countryName) return 0 
        return -1 
        return 1 

We have modified the playground sample as per your requirement, kindly refer to the following link: http://jsplayground.syncfusion.com/r2dls3ja 



This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.