faid faid - 1 month ago 8
Javascript Question

Select2 Show Currently Searched Value

I'm using Selec2 framework to do this with ajax call, i'm successfully implement this in my project but why when enter value to search it's showing current search value as selectable option, even when no result, i wan't to hide this. Any suggestion? thanks

Showing curent search value and it's selectable:
enter image description here

Even when no result:
enter image description here

HTML:

<select style='width:100%;' id='select-employee'></select>


JS:

$("#select-employee").select2({
theme: "bootstrap",
placeholder: "Select employee...",
minimumInputLength: 1,
tags: [],
ajax: {
url: "getEmployee.php",
dataType: "json",
type: "POST",
delay: 250,
data: function(params) {
return {
term: params.term,
page: params.page
};
},
processResults: function(data, params) {
params.page = params.page || 0;
return {
results: data.items,
pagination: {
more: (data.page == "1" ? true : false)
}
};
},
cache: true
}
});

Answer

Hi it's because you have to fill tags to false, try to change [] to false

$("#select-employee").select2({
  theme: "bootstrap",
  placeholder: "Select employee...",
  minimumInputLength: 1,
  tags: false,
  ajax: {
    url: "getEmployee.php",
    dataType: "json",
    type: "POST",
    delay: 250,
    data: function(params) {
        return {
            term: params.term,
            page: params.page
        };
    },
    processResults: function(data, params) {
        params.page = params.page || 0;
        return {
            results: data.items,
            pagination: {
                more: (data.page == "1" ? true : false)
            }
        };
    },
    cache: true
  }
});