Change "No results found" message #296

azegas · 2024-08-26T13:25:56Z

azegas
Aug 26, 2024

Hello!

I have an exactly the same question like the person here - https://stackoverflow.com/questions/78023093/put-link-anchor-in-select2-no-results-dropdown-message

In this case a vessel with a code of "000000" does not exist, so it writes "No results found", but I want to have a link instead of this text that links the user to vessel creation page.

I have found that if I copy select2.full.js file into static/admin/js/vendor/select2 local project directory - I am able to override this function

    noResults: function () {
      return 'No results found';
    },

to this for example:

    noResults: function () {
      return 'No results found TEST';
    },

It renders like so:

Looks good. I then try to add a button to that field and the button does not render:

      noResults: function () {
        return 'No results found TEST <button type="button">Click Me!</button>';
      },

Copying the whole file just to be able to modify one function does not seem like the best way to achieve this. And also since the button does not render it proves that it is not the correct way either.

What would be the proper way to achieve this?

Thank you,

Azegas

Answered by codingjoe

Aug 29, 2024

Scratch that, I found a test in the JS code that should allow you to override a single message, see also: https://github.com/select2/select2/blob/07bd61a0e8b928d490c86f61d6abbdcb61f4bbd4/tests/options/translation-tests.js#L63-L87

Just pass the following options:

$.select2({
    language: {
        noResults: () => 'My custom message'
    }
})

View full answer

azegas · 2024-08-27T09:49:03Z

azegas
Aug 27, 2024
Author

Apparently I had to return a jQuery object instead, so that Select2 would correctly render the button as HTML.

such works, renders a HTML button instead of simply displaying text:

      noResults: function () {
        return $('<div>No results found <a href="/admin/vessel/vessel/add/" style="color:red;">Add vessel</a></div>');
      },

Now the goal is not to have THE WHOLE select2.full.js file in my project, but somehow simply override the place that I need, the noResults function specifically.

0 replies

azegas · 2024-08-27T11:15:35Z

azegas
Aug 27, 2024
Author

Asked here as well - https://forums.select2.org/t/how-do-i-rename-the-noresults-function-message/2531

0 replies

codingjoe · 2024-08-28T11:11:09Z

codingjoe
Aug 28, 2024
Maintainer

Hi there 👋,

The message can't over overridden via the configuration. You will have to provide your own translation file with the correct new message.

This repo is really only concerned with the Django integration of Select2. If you want to know how to create a translation file, the Select2 community is certainly the best place to ask.

Please let me know, should you have any further questions.

Best,
Joe

6 replies

azegas Aug 28, 2024
Author

Thank you for the reply, @codingjoe!

Can you please be more specific on why we one can't override the "No results found" message from noResults function? I don't really work with JS and jQuery, please help me understand and learn :)

I did not know about the translation files, so I went into source code and changed it like you see above, but that can't be the proper way.

Thank you!

codingjoe Aug 29, 2024
Maintainer

Scratch that, I found a test in the JS code that should allow you to override a single message, see also: https://github.com/select2/select2/blob/07bd61a0e8b928d490c86f61d6abbdcb61f4bbd4/tests/options/translation-tests.js#L63-L87

Just pass the following options:

$.select2({
    language: {
        noResults: () => 'My custom message'
    }
})

Answer selected by codingjoe

azegas Aug 29, 2024
Author

What am I doing wrong? :s my message still does not get overridden.

Perhaps I have to specify which <select> tag this change applies? Tried finding an id of a <select> tag from here (this is the html that renders the whole "collaterals" block that you are seeing in the image above:

<fieldset class="module " data-select2-id="8">
   <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 rounded-md text-gray-900 text-sm lg:-mx-4 dark:bg-white/[.02] dark:border dark:border-gray-800 dark:text-gray-200">
      Collaterals
   </h2>
   <div data-select2-id="7">
      <table class="border border-gray-200 border-spacing-none border-separate mb-6 rounded-md shadow-sm text-gray-700 w-full dark:border-gray-800" data-select2-id="6">
         <thead class="hidden lg:table-header-group">
            <tr>
               <th class="column-vessel required align-middle border-b border-gray-200 font-medium px-3 py-2 text-left text-gray-400 text-sm dark:border-gray-800">
                  <span class="flex flex-row items-center">
                  Vessel code
                  </span>
               </th>
               <th class="column-vessel_name align-middle border-b border-gray-200 font-medium px-3 py-2 text-left text-gray-400 text-sm dark:border-gray-800">
                  <span class="flex flex-row items-center">
                  Name
                  </span>
               </th>
               <th class="column-ship_type align-middle border-b border-gray-200 font-medium px-3 py-2 text-left text-gray-400 text-sm dark:border-gray-800">
                  <span class="flex flex-row items-center">
                  Ship type
                  </span>
               </th>
               <th class="column-ship_sub_type align-middle border-b border-gray-200 font-medium px-3 py-2 text-left text-gray-400 text-sm dark:border-gray-800">
                  <span class="flex flex-row items-center">
                  Ship sub type
                  </span>
               </th>
               <th class="column-year_of_build align-middle border-b border-gray-200 font-medium px-3 py-2 text-left text-gray-400 text-sm dark:border-gray-800">
                  <span class="flex flex-row items-center">
                  Year
                  </span>
               </th>
               <th class="column-country_built align-middle border-b border-gray-200 font-medium px-3 py-2 text-left text-gray-400 text-sm dark:border-gray-800">
                  <span class="flex flex-row items-center">
                  Country
                  </span>
               </th>
               <th class="column-market_value align-middle border-b border-gray-200 font-medium px-3 py-2 text-left text-gray-400 text-sm dark:border-gray-800">
                  <span class="flex flex-row items-center">
                  Market value
                  </span>
               </th>
               <th class="column-market_value_suggested align-middle border-b border-gray-200 font-medium px-3 py-2 text-left text-gray-400 text-sm dark:border-gray-800">
                  <span class="flex flex-row items-center">
                  AVG market value of this type of vessels($mn)
                  </span>
               </th>
               <th class="column-relative_value_3mo align-middle border-b border-gray-200 font-medium px-3 py-2 text-left text-gray-400 text-sm dark:border-gray-800">
                  <span class="flex flex-row items-center">
                  Value 3m
                  </span>
               </th>
               <th class="column-relative_value_6mo align-middle border-b border-gray-200 font-medium px-3 py-2 text-left text-gray-400 text-sm dark:border-gray-800">
                  <span class="flex flex-row items-center">
                  Value 6m
                  </span>
               </th>
               <th class="column-relative_value_9mo align-middle border-b border-gray-200 font-medium px-3 py-2 text-left text-gray-400 text-sm dark:border-gray-800">
                  <span class="flex flex-row items-center">
                  Value 9m
                  </span>
               </th>
               <th class="column-relative_value_12mo align-middle border-b border-gray-200 font-medium px-3 py-2 text-left text-gray-400 text-sm dark:border-gray-800">
                  <span class="flex flex-row items-center">
                  Value 12m
                  </span>
               </th>
               <th class="column-link_to_vessel align-middle border-b border-gray-200 font-medium px-3 py-2 text-left text-gray-400 text-sm dark:border-gray-800">
                  <span class="flex flex-row items-center">
                  </span>
               </th>
               <th class="align-middle border-b border-gray-200 font-medium px-3 py-2 text-left text-gray-400 text-sm lg:w-px dark:border-gray-800">
                  Delete?
               </th>
            </tr>
         </thead>
         <tbody data-select2-id="5">
            <tr class="lg:border-b-0 form-row dynamic-collateral_set" id="collateral_set-0">
               <td class="field-vessel py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="Vessel code" data-select2-id="4">
                  <select name="collateral_set-0-vessel" id="id_collateral_set-0-vessel" data-autocomplete-light-language="en" data-autocomplete-light-url="/vessel/vessel-autocomplete/" data-autocomplete-light-function="select2" data-select2-id="id_collateral_set-0-vessel" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
                     <option value="" selected="" data-select2-id="2">Select value</option>
                  </select>
                  <span class="select2 select2-container select2-container--default select2-container--below" dir="ltr" data-select2-id="1" style="width: 116.441px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-id_collateral_set-0-vessel-container"><span class="select2-selection__rendered" id="select2-id_collateral_set-0-vessel-container" role="textbox" aria-readonly="true"><span class="select2-selection__placeholder"></span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
               </td>
               <td class="field-vessel_name py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="Name">
                  <p class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                     -
                  </p>
               </td>
               <td class="field-ship_type py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="ship type">
                  <p class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                     -
                  </p>
               </td>
               <td class="field-ship_sub_type py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="ship sub type">
                  <p class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                     -
                  </p>
               </td>
               <td class="field-year_of_build py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="Year">
                  <p class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                     -
                  </p>
               </td>
               <td class="field-country_built py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="Country">
                  <p class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                     -
                  </p>
               </td>
               <td class="field-market_value py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="Market value">
                  <input type="text" name="collateral_set-0-market_value" class="border bg-white font-medium rounded-md shadow-sm text-gray-500 text-sm focus:ring focus:ring-primary-300 focus:border-primary-600 focus:outline-none group-[.errors]:border-red-600 group-[.errors]:focus:ring-red-200 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400 dark:focus:border-primary-600 dark:focus:ring-primary-700 dark:focus:ring-opacity-50 dark:group-[.errors]:border-red-500 dark:group-[.errors]:focus:ring-red-600/40 px-3 py-2 w-full max-w-2xl" step="0.01" id="id_collateral_set-0-market_value">
               </td>
               <td class="field-market_value_suggested py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="AVG market value of this type of vessels($mn)">
                  <p class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                     -
                  </p>
               </td>
               <td class="field-relative_value_3mo py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="Value 3m">
                  <p class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                     -
                  </p>
               </td>
               <td class="field-relative_value_6mo py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="Value 6m">
                  <p class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                     -
                  </p>
               </td>
               <td class="field-relative_value_9mo py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="Value 9m">
                  <p class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                     -
                  </p>
               </td>
               <td class="field-relative_value_12mo py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="Value 12m">
                  <p class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                     -
                  </p>
               </td>
               <td class="field-link_to_vessel py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="">
                  <p class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                     -
                  </p>
               </td>
               <td class="delete py-3 text-left font-normal px-3 text-sm text-red-600 border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-sm lg:align-top lg:table-cell lg:underline lg:w-px dark:border-gray-800" data-label="Remove">
                  <div><a class="inline-deletelink" href="#">Remove</a></div>
               </td>
            </tr>
            <tr class="lg:border-b-0 form-row  empty-form" id="collateral_set-empty">
               <td class="field-vessel py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="Vessel code">
                  <select name="collateral_set-__prefix__-vessel" id="id_collateral_set-__prefix__-vessel" data-autocomplete-light-language="en" data-autocomplete-light-url="/vessel/vessel-autocomplete/" data-autocomplete-light-function="select2">
                     <option value="" selected="">Select value</option>
                  </select>
               </td>
               <td class="field-vessel_name py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="Name">
                  <p class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                     -
                  </p>
               </td>
               <td class="field-ship_type py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="ship type">
                  <p class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                     -
                  </p>
               </td>
               <td class="field-ship_sub_type py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="ship sub type">
                  <p class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                     -
                  </p>
               </td>
               <td class="field-year_of_build py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="Year">
                  <p class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                     -
                  </p>
               </td>
               <td class="field-country_built py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="Country">
                  <p class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                     -
                  </p>
               </td>
               <td class="field-market_value py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="Market value">
                  <input type="text" name="collateral_set-__prefix__-market_value" class="border bg-white font-medium rounded-md shadow-sm text-gray-500 text-sm focus:ring focus:ring-primary-300 focus:border-primary-600 focus:outline-none group-[.errors]:border-red-600 group-[.errors]:focus:ring-red-200 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-400 dark:focus:border-primary-600 dark:focus:ring-primary-700 dark:focus:ring-opacity-50 dark:group-[.errors]:border-red-500 dark:group-[.errors]:focus:ring-red-600/40 px-3 py-2 w-full max-w-2xl" step="0.01" id="id_collateral_set-__prefix__-market_value">
               </td>
               <td class="field-market_value_suggested py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="AVG market value of this type of vessels($mn)">
                  <p class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                     -
                  </p>
               </td>
               <td class="field-relative_value_3mo py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="Value 3m">
                  <p class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                     -
                  </p>
               </td>
               <td class="field-relative_value_6mo py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="Value 6m">
                  <p class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                     -
                  </p>
               </td>
               <td class="field-relative_value_9mo py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="Value 9m">
                  <p class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                     -
                  </p>
               </td>
               <td class="field-relative_value_12mo py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="Value 12m">
                  <p class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                     -
                  </p>
               </td>
               <td class="field-link_to_vessel py-3 align-top border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800" data-label="">
                  <p class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                     -
                  </p>
               </td>
               <td class="delete py-3 text-left font-normal px-3 text-sm text-red-600 border-b border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-sm lg:align-top lg:table-cell lg:underline lg:w-px dark:border-gray-800" data-label="Remove">
               </td>
            </tr>
            <tr class="add-row">
               <td colspan="14"><a href="#">Add</a></td>
            </tr>
         </tbody>
      </table>
   </div>
</fieldset>

Then tried to apply your code to a specific <select> tag like so:

$('select[id*="id_collateral_set"]').select2({
    language: {
        noResults: function() {
                    return 'My custom message';
        }
    }
});

select[id*="id_collateral_set"] is so that it targets all the selects that have id_collateral_set in their id. But the message still remains the same.

When I click on the dropdown, a span appears that displays the select options(results), tried looking for some id's to hang on to there also, but there are no <select> elements in this dynamically created span:

<span class="select2-container select2-container--default select2-container--open" style="position: absolute; top: 591.372px; left: 61.0938px;">
   <span class="select2-dropdown select2-dropdown--below" dir="ltr" style="width: 167.986px;">
      <span class="select2-search select2-search--dropdown"><input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="searchbox" aria-autocomplete="list" aria-controls="select2-id_collateral_set-0-vessel-results"></span>
      <span class="select2-results">
         <ul class="select2-results__options" role="listbox" id="select2-id_collateral_set-0-vessel-results" aria-expanded="true" aria-hidden="false">
            <li role="alert" aria-live="assertive" class="select2-results__option select2-results__message">No results found</li>
         </ul>
      </span>
   </span>
</span>

codingjoe Aug 30, 2024
Maintainer

Hm… did you set a breakpoint to make sure your custom code is being called?

azegas Sep 3, 2024
Author

For example if my custom .js file contains this:

console.log("custom file is loaded")

$('#id_collateral_set-0-vessel').select2(
    {
    language: {
        noResults: () => 'My custom message'
    }
}
)

The console log output is displayed in browser console, but the message remains unchanged.

What did you mean by "Just pass the following options:" and how would I do it? ;/

For someone working with js and jquery my questions might be dumb, but I am having trouble with this..

Thank you!

codingjoe Sep 26, 2024
Maintainer

Maybe this helps? #217

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Change "No results found" message #296

{{title}}

Replies: 3 comments 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Change "No results found" message #296

azegas Aug 26, 2024

Replies: 3 comments · 6 replies

azegas Aug 27, 2024 Author

azegas Aug 27, 2024 Author

codingjoe Aug 28, 2024 Maintainer

azegas Aug 28, 2024 Author

codingjoe Aug 29, 2024 Maintainer

azegas Aug 29, 2024 Author

codingjoe Aug 30, 2024 Maintainer

azegas Sep 3, 2024 Author

codingjoe Sep 26, 2024 Maintainer

azegas
Aug 26, 2024

Replies: 3 comments 6 replies

azegas
Aug 27, 2024
Author

azegas
Aug 27, 2024
Author

codingjoe
Aug 28, 2024
Maintainer

azegas Aug 28, 2024
Author

codingjoe Aug 29, 2024
Maintainer

azegas Aug 29, 2024
Author

codingjoe Aug 30, 2024
Maintainer

azegas Sep 3, 2024
Author

codingjoe Sep 26, 2024
Maintainer