You cannot specify the
data property in your Select2 initializer when you also use the
ajax feature; Select2 will use the value of the
data property rather than the data retrieved via AJAX to populate the dropdown, which most likely isn’t what you want.
However, with 22K devices and the way you’re handling them now, your Select2 is going to be extremely slow. (In my experience, it slows down significantly after about 1,000 items). When using the AJAX feature, Select2 expects the AJAX endpoint (
ajax.url property) to filter the results it sends back. At the very least (i.e., without a query term—as in when the user simply clicks in the text box but hasn’t typed anything), it expects that only one pageful of results will be returned at a time. It definitely doesn’t expect 22K results in a single page.
From reading your code it looks like you’ve selected a page size of 30 results per page. Therefore, your AJAX endpoint should return no more than 30 results at a time. If there are more than 30 results for the current query, then the endpoint should also return an indication that there are more results available. As the user paginates (scrolls down or up in the results list), Select2 will send additional queries to the AJAX endpoint with the same query term but an updated
page value. It expects the AJAX endpoint will have logic to be able to return the requested page of results.
Since your AJAX endpoint is just a data file, this isn’t going to work the way Select2 expects. You need something like a database server (or a similar application) that can (1) filter your data set based on the user’s query term, and (2) return a specific pageful of results at a time.
If you can’t make that happen, then my recommendation would be:
getJson() method) and then supply that object as the value of the
data property in your Select2 initialization object.
minimumInputLength to a value greater than 0, so Select2 will only render data in the dropdown after the user types a few characters. This will limit the number of results that Select2 will render in the dropdown. However, given the size of your data set, I still expect this could be quite a large amount of data. Note that you cannot use the pagination feature with a local data set (which is what you’ve got when you use the
data property), so Select2 will try to render every record from the data that matches the user’s current query [*see below]. This will still take a long time, because Select2 must test the user’s query term against every record in the data set to find the matches.
Given the large size of your data set, I strongly suggest that—if it’s possible—you subdivide your data into smaller chunks, ideally of no more than about 1000 records each. Require the user to select a “chunk” first (however you choose to do that), and then initialize the Select2 with just that chunk. Note that if the user then chooses a different chunk, you will have to re-initialize the Select2 with the new chunk (and I suggest that you destroy the Select2 before re-initializing it, to help avoid memory leaks).
*Note: If you can’t subdivide your data into separate files, Select2 will try to render every record that matches the user’s query. To do this it has to compare the user’s query to each one of the 22K results, and it does that with a linear search (i.e., it compares every single record to the query term to decide which ones to show). As I noted above, if there are more than about 1000 total records, Select2 slows down noticeably. With 22K records, the response time will probably be unacceptable to your users.